javascript - Javascript通过循环添加事件侦听器

This question already has answers here:

How to use closures to create event listeners in a Javascript for loop?
                            
                                （2个答案）
                            
                    
                4年前关闭。
        

    

我试图循环多个元素，并将事件侦听器添加到每个元素。侦听器将与正确的对象相对应并将该文本加载到div中。

不幸的是，似乎最后一个元素的事件侦听器是唯一起作用的元素。我不确定为什么...

这是显示问题的粗略小提琴：
https://jsfiddle.net/74b03bcx/

VARS = {
                postImg: null,
                postSrc: null,
                skillChart: document.getElementById("skillChart"),
                design: document.getElementById("design"),
                development: document.getElementById("development"),
                skillLength: skillChart.getElementsByTagName("p").length,
                skillIcon: document.getElementById("skillInfo").getElementsByTagName("div")[0],
                skillText: document.getElementById("skillInfo").getElementsByTagName("p")[0]
            }

            SKILLS = {
                icon : {
                    photoshop: "backgroundImage: url('')",
                    illustrator: "backgroundImage: url('')",
                    indesign: "backgroundImage: url('')",
                    html: "backgroundImage: url('')",
                    css: "backgroundImage: url('')",
                    sass: "backgroundImage: url('')",
                    javascript: "backgroundImage: url('')",
                    jquery: "backgroundImage: url('')",
                    gsap: "backgroundImage: url('')",
                    node: "backgroundImage: url('')",
                    wordpress: "backgroundImage: url('')",
                    php: "backgroundImage: url('')",
                    mysql: "backgroundImage: url('')"
                },

                text : {
                    photoshop: "Photoshop is an application from Adobe that is used for image creation and manipulation.",
                    illustrator: "backgroundImage: url('')",
                    indesign: "backgroundImage: url('')",
                    html: "backgroundImage: url('')",
                    css: "backgroundImage: url('')",
                    sass: "backgroundImage: url('')",
                    javascript: "backgroundImage: url('')",
                    jquery: "backgroundImage: url('')",
                    gsap: "backgroundImage: url('')",
                    node: "backgroundImage: url('')",
                    wordpress: "backgroundImage: url('')",
                    php: "backgroundImage: url('')",
                    mysql: "MySQL is a database"
                }

            }


            for (var i = 0; i < VARS.skillLength; i++) {

                var p = VARS.skillChart.getElementsByTagName("p")[i],
                    label = p.getElementsByTagName("label")[0],
                    txt = label.innerHTML.toLowerCase();

                    console.log(SKILLS.text[txt]);
                    console.log(txt);

                p.addEventListener("mouseover", function(){
                    VARS.skillText.innerHTML = SKILLS.text[txt];
                });

                label.style.width = p.dataset.value+"%";
            }

<div id="skillInfo">
        <div></div>
        <p></p>
    </div>
    <div id="skillChart">
        <div id="design">
            <p data-value="80">
                <label>Photoshop</label>
            </p>
            <p data-value="60">
                <label>Illustrator</label>
            </p>
            <p data-value="60">
                <label>InDesign</label>
            </p>
        </div>
        <div id="development">
            <p data-value="90">
                <label>HTML</label>
            </p>
            <p data-value="90">
                <label>CSS</label>
            </p>
            <p data-value="60">
                <label>SASS</label>
            </p>
            <p data-value="70">
                <label>Javascript</label>
            </p>
            <p data-value="80">
                <label>jQuery</label>
            </p>
            <p data-value="60">
                <label>GSAP</label>
            </p>
            <p data-value="10">
                <label>Node</label>
            </p>
            <p data-value="30">
                <label>Wordpress</label>
            </p>
            <p data-value="20">
                <label>PHP</label>
            </p>
            <p data-value="10">
                <label>MySQL</label>
            </p>
        </div>
    </div>

最佳答案

每次迭代创建一个scope，

for (var i = 0; i < VARS.skillLength; i++) {
  (function(i) {
    var p = VARS.skillChart.getElementsByTagName("p")[i],
      label = p.getElementsByTagName("label")[0],
      txt = label.innerHTML.toLowerCase();

    console.log(SKILLS.text[txt]);
    console.log(txt);

    p.addEventListener("mouseover", function() {
      VARS.skillText.innerHTML = SKILLS.text[txt];
    });

    label.style.width = p.dataset.value + "%";
  })(i);
}

DEMO