Javascript 通过循环添加事件侦听器
Javascript Adding Event Listeners by Loop
我正在尝试遍历多个元素并为每个元素添加事件侦听器。侦听器将与正确的对象相对应,并将该文本加载到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);
}
演示
相关文章:
- 如何在for循环中添加事件侦听器
- 未命中服务器发送的事件侦听器
- 如何覆盖原型中的事件侦听器
- 无法将事件侦听器附加到画布
- 如何在d3.js中自定义事件侦听器
- 在es6中,将带有回调的事件侦听器设置为可迭代的
- 事件侦听器未在chrome扩展中的options.js中启动
- IE8更改文本区域上的事件侦听器不工作
- 将事件侦听器添加到文档,而不是签入元素存在,然后添加事件侦听器
- javascript删除事件侦听器
- 我应该/如何清除mousemove JQuery事件侦听器
- 在JQuery中使用谷歌地图Api事件/侦听器
- 如何使用我的Jquery代码创建委托事件侦听器
- 'mousemove'画布中的事件侦听器-指针仅在最后一个矩形中更改
- 为什么此事件侦听器不工作
- 是否可以在数字输入框中的小按钮中添加事件侦听器
- 在Google Chrome扩展中添加事件侦听器
- SVG元素在转换后会丢失事件侦听器
- jQuery事件侦听器多次启动
- 如何在不删除类似侦听器的情况下从父对象中删除jQuery事件侦听器