即使元素/类相同，变异观察者仍可设置不同的属性？

问题描述

我试图让一个变异观察者注入HTML，但是我遇到的问题是目标元素是相同的。

请在以下屏幕截图中查看：

我正在尝试在每个“预算”字段标题旁边添加一个工具提示。 不幸的是，对于目标元素的第一次出现，我只能使用setAttribute。 这意味着两个工具提示都被添加到DOM中，但是它们包含相同的工具提示文本，而不是两个不同的文本。

我不知道如何设置它们。这是JavaScript代码。感谢您的帮助。

function init() {
let nodes = document.querySelector("[id='HeaderPanel']");
let config = {
    childList: true,subtree: true
};

    observer = new MutationObserver(mutated);
    observer.observe(nodes,config);
};

function mutated(mutationList) {
// console.log(mutationList);
for (let mutation of mutationList) {

    let groups = document.querySelectorAll("[class*='ms-link th-frm-group']");
    for (let g = 0; g < groups.length; g++) {

        let elements = document.querySelectorAll("th[class*='subelem-header']");

        for (let e = 0; e < elements.length; e++) {

            let strHTML = '<i class="icon ms-Icon ms-Icon--Info descriptionTooltipIcon"></i>';

            if (groups[g].innerText == 'Architectural Need' && elements[e].innerText == 'Budget') {
                console.log('Match.');

                if (!elements[e].innerHTML.includes(strHTML)) {
                    elements[e].innerHTML += strHTML;

                    // Create tooltip text
                    let tooltip = "5"

                    // Inject attribute
                    elements[e].setAttribute("title",tooltip);
                }
            }
            else {
                console.log('No match.');
            }

            if (groups[g].innerText == 'Business Need' && elements[e].innerText == 'Budget') {
                // debugger;
                console.log('Match.');

                // if (!elements[e].innerHTML.includes(strHTML)) {
                    elements[e].innerHTML += strHTML;

                    // Create tooltip text
                    let tooltip = "10"

                    // Inject attribute
                    elements[e].setAttribute("title",tooltip);

                    // disconnect observer after last change
                    observer.disconnect();
                // }
            }
            else {
                console.log('No match.');
            }
        }
    }
}
}

init();

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）