Question

使用以下脚本遍历具有一类模糊的元素列表不起作用

<script type="text/javascript">
$(document).ready(function(){
    var current = $('.blur').first();
    $("#scroll-down").click(function(){
        $(current).toggleClass('blur-unfocused');
        current = $(current).next('.blur');
    });
});
</script>

如何改进此脚本以遍历具有类模糊的下一个项目？

Answer 1

你可以这样做吗？

$(document).ready(function(){
    var current = $('.blur').first();
    $("#scroll-down").click(function(){
        $(current).toggleClass('blur-unfocused');
        current = $('.blur:not(.blur-unfocused)');
    });
});

Answer 2

您可以将它们存储在一个数组中，然后根据需要进行遍历：

<script type="text/javascript">
$(document).ready(function(){
    var all = $('.blur');        
    if (all.length > 0) {
      var currentCount = 0;
      var current = all[currentCount];
      $("#scroll-down").click(function(){
          $(current).toggleClass('blur-unfocused');
          if (all.length > currentCount-1) {
            current = all[++currentCount];
          }
      });
    }
});
</script>

Answer 3

因为它们可能位于页面的任何位置，所以我会将它们全部存储起来并遍历它们，而不是只检索第一个并尝试找到下面的一个：

$(document).ready(function(){
    var $allBlurs = $('.blur');
    var currentIndex = 0;

    $("#scroll-down").click(function(){
        // Retrieve Current Blur
        var $current = $allBlurs.eq(currentIndex);

        // Increment Index (optionally looping)
        currentIndex = (currentIndex + 1) % $allBlurs.length;

        // Retrieve Next Blur 
        var $next = $allBlurs.eq(currentIndex);

        $current.toggleClass('blur-unfocused');
        /* ... more code here ... */
    });
});

<强> Example Fiddle

我应该如何使用jquery将var更改为click事件的下一个兄弟

3 个答案: