Question

我的功能有问题。我需要一个for循环来将click事件附加到我的元素。现在很遗憾只将click事件添加到最后一个元素。

我现在这样做了：

var $texte = $('.text-bg');

            $texte = $texte.children();
            for(i=0;i<$texte.length;i++){
            switch($($texte[i]).attr('class')){

                case 'text-top-left':
                console.log($texte[i]);
                    $($texte[i]).on('click', function(){
                        $($texte[i]).toggle(
                            function(){$($texte[i]).animate({'left':'0'})}, 
                            function(){$($texte[i]).animate({'left':'-100px'})}
                            );
                            });
                break;
            }
            }

但不知何故，点击事件不会保存。因此，当它进入for函数的第二个循环时，第一个单击事件将被覆盖。如何防止这种情况？

Answer 1

您可以在事件处理程序中使用this来引用当前元素

$($clicker[i]).on('click', function () {
    $(this).animate({
        'left': '0'
    });
});

为什么您的解决方案无效

给定的代码可以更改为（这里不需要有switch语句）

var $texte = $('.text-bg');

$texte.children('.text-top-left').click(function () {
    var $this = $(this),
        flag = $this.data('animToggle');
    $this.data('animToggle', !flag);
    $this.animate({
        'left': flag ? '0' : '-100px'
    })
})

演示：Fiddle

Answer 2

您需要使用this，在事件处理程序中，它引用执行事件的元素。

使用

$($clicker[i]).on('click', function(){
    $(this).animate({'left':'0'}); //Used this here
});

您的代码可以简化为.toggle(function, function, ... ) removed in jQuery 1.9

$('.text-bg > .text-top-left').on('click', function() {
    var toggle = $(this).data('toggle');
    $(this).data('toggle', !toggle);
    $(this).animate({
        'left': toggle ? '-100px' : '0'
    });
});

Answer 3

您应该能够立即将处理程序附加到所有jQuery结果元素：

$clicker.on('click', function(){
    $(this).animate({'left':'0'}); //Used this here
});

使用更新的代码，您应该使用jQuery已经提供的选择工具：

$('.text-bg > .text-top-left').on('click', function() {
  $(this).toggle(
    function() {
     $(this).animate( {'left':'0'})}, 
      function() {
       $(this).animate({'left':'-100px'})
      });
    });
 });

要添加第二个案例（针对另一个班级），只需要＆＃39; double＆＃39;具有替代行为的代码。

Answer 4

您可以使用

$($texte[i]).on('click', function(){
    $(this).animate({'left':'0'});
});

或者只是将循环变量分配给局部变量INSIDE the loop：

var j = i;
$($texte[j]).on('click', function(){
    $($texte[j]).animate({'left':'0'});
});

.on（'click'）for循环到多个元素？

4 个答案: