將相同的上標添加到具有相同屬性的元素

我正在嘗試創建一個基于 DOM 元素屬性動態添加上標的函式。如果屬性值相同，該函式需要添加相同的上標數字。

HTML：

<span class='disclosure' data-id="test1">Footnote</span>
<span class='disclosure' data-id="test2">Another footnote</span>
<span class='disclosure' data-id="test3">Another footnote</span>
<span class='disclosure' data-id="test1">Another footnote</span>

JS：

        let disclosureElement = document.querySelectorAll('span[data-id]'),
        disclosureArray = [],
        footnoteNumber = 1;
    function createDisclosureArray(){    
        for (let i = 0, max=disclosureElement.length; i < max; i  ) {
            let fragmentId = disclosureElement[i].dataset.id;
            let uniqueIdString = Math.random().toString(16).slice(2,8);
            disclosureArray.push({
                fragmentId: fragmentId,
                anchorId: fragmentId  '-'  uniqueIdString,
                superScript: footnoteNumber
            });
            anchorTag = document.createElement('a');
            anchorTag.setAttribute('href', '#' disclosureArray[i].anchorId);
            anchorTag.setAttribute('class', 'disclosureAnchor');
            sup = document.createElement('sup');
            const fragment = document.createDocumentFragment();
            const superScript = fragment
                .appendChild(anchorTag)
                .appendChild(sup);
            superScript.textContent = '[' disclosureArray[i].superScript ']';
            disclosureElement[i].append(fragment);
            footnoteNumber  ;
        }

        return disclosureArray;
    }
createDisclosureArray();

以上將遍歷物件陣列并添加上標。但是，我需要它為具有相同 data-id 屬性的所有元素添加匹配的上標。

例如， <span class='disclosure' data-id="test1">footnote</span>并且<span class='disclosure' data-id="test1">Another footnote</span>應該具有相同的上標腳注編號，因為它們的 data-id 屬性具有相同的值。

uj5u.com熱心網友回復：

我添加了一個previous物件，其中包含 dataset.ids 作為鍵，footnoteNumbers 作為值。previous如果 dataset.id 不在物件中，我只添加一個鍵值對。然后我將當前 dataset.id 鍵的值（即分配給該 dataset.id 的原始腳注）放入一個名為n. 我使用將上標分配給n

這是片段：

         let disclosureElement = document.querySelectorAll('span[data-id]');
        let disclosureArray = [];
        let footnoteNumber = 1;

        let previous = {};
        let n;       
        
        function createDisclosureArray(){    
            for (let i = 0, max=disclosureElement.length; i < max; i  ) {

                if(!previous.hasOwnProperty(disclosureElement[i].dataset.id)){
                    previous[disclosureElement[i].dataset.id] = footnoteNumber;
                }
                n = previous[disclosureElement[i].dataset.id];


                let fragmentId = disclosureElement[i].dataset.id;
                let uniqueIdString = Math.random().toString(16).slice(2,8);
                disclosureArray.push({
                    fragmentId: fragmentId,
                    anchorId: fragmentId  '-'  uniqueIdString,
                    //superScript: footnoteNumber

                    superScript: n

                });
                anchorTag = document.createElement('a');
                anchorTag.setAttribute('href', '#' disclosureArray[i].anchorId);
                anchorTag.setAttribute('class', 'disclosureAnchor');
                sup = document.createElement('sup');
                const fragment = document.createDocumentFragment();
                const superScript = fragment
                    .appendChild(anchorTag)
                    .appendChild(sup);
                superScript.textContent = '[' disclosureArray[i].superScript ']';
                disclosureElement[i].append(fragment);
                footnoteNumber  ;
            }

            return disclosureArray;
        }
        createDisclosureArray();

    <span class='disclosure' data-id="test1">Footnote</span>
    <span class='disclosure' data-id="test2">Another footnote</span>
    <span class='disclosure' data-id="test3">Another footnote</span>
    <span class='disclosure' data-id="test1">Another footnote</span>

標籤：javascripthtml数组

上一篇：從txt讀取浮點數（具有特殊字符[]）并將它們存盤到二維陣列中

下一篇：重構json物件陣列以表格格式顯示資料