0

单击“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？

4

2 回答 2

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);
    }
});

这样，每次点击只执行一次，而执行次数最多的一次。

于 2013-11-14T22:57:36.357 回答
0

不确定这是否有效；但你可以调整这个。我没有测试过。如果你能给html一个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);    
});
于 2013-11-14T23:24:46.907 回答