jq的each问题

clipboard.png
当box是奇数时正常,偶数个则无效?

阅读 4.4k
7 个回答

楼主大人你好,此处的each,循环后,当你点击按钮的时候,实际就是点击多少次,如果为奇数那么他就是show,如果为偶数就是show,hide所以你这块最初的做法就是错的,按你的想法写的话,应该是$('.box').each(function(){$(this).chidlren('em').on('click',function(){$(this).siblings('span').toggle()})}),当然最标准的答案是熊猫桑的答案

下面说的 不一定 与你的问题直接相关,但是你的写法是错误的。

$('body').on(...)

这个执行多次,事件就绑定了多次,重复绑定了,每个 thisnext().toggle() 都会执行多次。

没看明白为什么要用.each()……直接写委托就好了呀。

<script>
    $(document).on('click', '.box>em', function(){
        $(this).next().toggle();
    });
</script>

yszou 的答案就是你的問題所在。


$('body').on(...)

將被執行多次,且其中的$(this)為觸發事件的對象,而不是each的迭代對象。

即相同的事件處理將綁定$(.box).length次。

即觸發事件時執行$(.box).length次,$(this).next().toggle()


執行偶數次toggle(),結果就等於不執行。

没有必要遍历,直接委托事件就行; $(document).on('click', '.box>em', function(){

    $(this).next().toggle();
});

你使用了事件委托再使用this就没必要循环绑定事件啦,而且从性能上说每一个子元素绑定点击事件肯定有影响的,所以去掉each循环就可以啦

    $(function(){
        $('em').click(function(){
            $(this).next().toggle();
        })
    })
    
    这样更加直接,也不用事件委托;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题