jQuery事件点击发射多次

我试图显示一个接一个的div，当我点击“add_more”按钮时。第一次点击按我的意愿工作，但第二次点击所有div显示。jQuery事件点击发射多次

$(document).ready(function() { 
     $('#add_more').click(function() { 
      $('#add_more_fields').show(500); 
     }); 
    }); 

    $('#add_more').click(function() { 
     if($('#add_more_fields').is(':visible')) { 
      $('#add_more_fields2').show(500); 
     }; 
    }); 

    $('#add_more').click(function() { 
     if($('#add_more_fields2').is(':visible')) { 
      $('#add_more_fields3').show(500); 
     }; 
    }); 

    $('#add_more').click(function() { 
     if($('#add_more_fields3').is(':visible')) { 
      $('#add_more_fields4').show(500); 
     }; 
    }); 

    $('#add_more').click(function() { 
     if($('#add_more_fields4').is(':visible')) { 
      $('#add_more_fields5').show(500); 
     }; 
    });

我看到的问题是，所有这些都绑定到一个点击功能，并在同一时间触发。我如何分离事件，以便每次点击都添加下一个div？

来源

2013-11-14 user2736472

不要使用多个事件处理函数来快速处理相同的事件。尽管它有效（jQuery允许通过触发所有这些来让事件处理程序不会覆盖已经存在的处理程序），但它使得阅读起来更加困难，并且添加了代码行，只需要将代码打包整合到一个事件处理程序中 –

虽然现在我已经说过这个人可能会想出一个我没有想到的时间用例。但这当然不是其中之一。 –

我会用相反的顺序。这样的：

$('#add_more').click(function() { 
    if($('#add_more_fields4').is(':visible')) { 
     $('#add_more_fields5').show(500); 
    } else if($('#add_more_fields3').is(':visible')) { 
     $('#add_more_fields4').show(500); 
    } else if($('#add_more_fields2').is(':visible')) { 
     $('#add_more_fields3').show(500); 
    } else if($('#add_more_fields').is(':visible')) { 
     $('#add_more_fields2').show(500); 
    } else { 
     $('#add_more_fields').show(500); 
    } 
});

这样，只有一个正在执行的每一次点击，并且正在执行的最反感之一之一。

来源

2013-11-14 22:57:36 ahansen

噢，你打我40秒，我会删除我的，因为它是完全一样的。 –

我有一种回答这个问题的感觉是要成为一名竞赛对手 – ahansen

我更有趣地发现我们的答案几乎完全相同。 –

我不确定这是否可行;但你可以调整它。我没有测试过。如果你可以给一个jsfiddle的html;我可以发布测试工作解决方案。

$('#add_more').click(function(i,v){ // each time add_more is clicked 
    var num = + $(v).attr('id').split('add_more')[1]; // get the number from the id 
    var s = ['#add_more_fields' + num] 
    $('s').show(500);  
});

来源

2013-11-14 23:24:46 user1769790

jQuery事件点击发射多次

回答

相关问题