求问此处为何要使用自定义属性?

weixin_39939623 2018-02-08 11:35:49

...全文

219 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

hfhan_872914334 2018-02-09

打赏
举报

上面的代码是为了记住他是哪个，看你贴出下面的代码说明你是懂的，而下面的代码质量比上面的好，但是写错了，下面的代码中函数里的btnDoms[i] i指向最后一个数，点击哪个li都是最后一个li在改变状态，不是想象中的点哪个哪个变，你把btnDoms[i]改成this或者e.target就可以了

似梦飞花 2018-02-09

打赏
举报


var spans=document.querySelectorAll('span');
    for(var i=0;i<spans.length;i++){
        spans[i].onclick=function(){
            this.classList.toggle('change');
        }
    }

似梦飞花 2018-02-09

打赏
举报


<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        .change{
            color: red;
        }
    </style>
</head>
<body>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<script>
    [].slice.call(document.querySelectorAll('span')).forEach(function(item,index){
        item.onclick=function(){
            item.innerHTML=index;
            item.classList.toggle('change');
        }
    })
</script>
</body>
</html>

可以用foreach 也可以dom[i]改成this

似梦飞花 2018-02-09

打赏
举报

document.querySelectorAll("#imgBox li"); id是唯一的为什么要用selectorall呢

无聊的上午 2018-02-09

打赏
举报

引用 2 楼 jslang 的回复:

因为在事件函数内不能使用循环变量i，当事件触发执行时，for循环早就结束了，这个时候i已经是最大值加1了。所以要用this获取触发事件的元素，从元素的自定义属性中获取数据。另外的解决方法是用闭包把每次循环i的值保存起来。 for(var i=0;i<btnDoms.length;i++){ (function(i){ btnDoms[i].onclick = function () { btnDoms[i].className = "active"; imgDoms[i].style.display = "block"; } })(i); } 或者也可以用let块作用域变量(需要ie11+浏览器) for(let i=0;i<btnDoms.length;i++){ btnDoms[i].onclick = function () { btnDoms[i].className = "active"; imgDoms[i].style.display = "block"; } }

还有个简单的方式，可以让你理解他说的意思，在你的btnDoms[i].onclick函数中打印‘i’值，一目了然

天际的海浪 2018-02-09

打赏
举报

引用 4 楼 zzgzzg00 的回复:

document.querySelectorAll("#imgBox li"); id是唯一的为什么要用selectorall呢

人家不是要获取#imgBox元素本身，是要获取#imgBox里面的 li，li要多个当然要用SelectorAll

天际的海浪 2018-02-09

打赏
举报

因为在事件函数内不能使用循环变量i，当事件触发执行时，for循环早就结束了，这个时候i已经是最大值加1了。所以要用this获取触发事件的元素，从元素的自定义属性中获取数据。另外的解决方法是用闭包把每次循环i的值保存起来。 for(var i=0;i<btnDoms.length;i++){ (function(i){ btnDoms[i].onclick = function () { btnDoms[i].className = "active"; imgDoms[i].style.display = "block"; } })(i); } 或者也可以用let块作用域变量(需要ie11+浏览器) for(let i=0;i<btnDoms.length;i++){ btnDoms[i].onclick = function () { btnDoms[i].className = "active"; imgDoms[i].style.display = "block"; } }