Javascript 通过循环添加事件监听器

Question

这个问题已经有答案了:

How to use closures to create event listeners in a Javascript for loop? (2 个回答)

已关闭 7 年前。

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

不幸的是，最后一个元素的事件监听器似乎是唯一有效的。我不知道为什么...

这是一个显示问题的粗略的 fiddle : 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>

Answer 1

每次迭代创建一个范围，

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