Question

当我点击“add_more”按钮时，我正在尝试逐个显示div。第一次点击按照我的意愿工作，但在第二次点击时，所有的div显示。

$(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？

Answer 1

如果按相反的顺序我会使用else。这样：

$('#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);
    }
});

这样每次点击只执行一次，而正在执行的是最重要的一次。

Answer 2

我不确定这是否有效;但你可以调整一下。我没有测试过。如果你能为jtml提供一个jsfiddle;我可以发布一个经过测试的工作解决方案。

$('#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);    
});

jQuery事件单击多次触发

2 个答案: