JQuery событие запускает несколько раз

Question

JQuery событие запускает несколько раз

0

Я пытаюсь показать div один за другим, когда нажата кнопка "add_more". Первый щелчок работает так, как мне бы хотелось, но во втором щелкнете все divs show.

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

user2736472 14 нояб. 2013, в 23:58

Источник

0

Не используйте несколько обработчиков событий, которые обрабатывают одно и то же событие в быстрой последовательности. Хотя это работает (jQuery позволяет это, вызывая все из них так, что обработчик событий намного позже не перезаписывает уже существующий обработчик), это делает его более трудным для чтения и добавляет строки кода, когда вы можете просто связать свой код в один обработчик событий.
Tom Heard 14 нояб. 2013, в 23:10
0

Хотя теперь, когда я сказал это, кто-то, вероятно, придумает вариант использования того, когда делать это, о котором я даже не думал. Но это, конечно, не один из тех случаев.
Tom Heard 14 нояб. 2013, в 23:12

Теги:

jquery

click

events

2 ответа

0

Не уверен, что это работает; но вы можете настроить это. Я не тестировал. Если вы можете дать 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);    
});

user1769790 14 нояб. 2013, в 21:41

Ещё вопросы

Не используйте несколько обработчиков событий, которые обрабатывают одно и то же событие в быстрой последовательности. Хотя это работает (jQuery позволяет это, вызывая все из них так, что обработчик событий намного позже не перезаписывает уже существующий обработчик), это делает его более трудным для чтения и добавляет строки кода, когда вы можете просто связать свой код в один обработчик событий.
Хотя теперь, когда я сказал это, кто-то, вероятно, придумает вариант использования того, когда делать это, о котором я даже не думал. Но это, конечно, не один из тех случаев.

ahansen · Accepted Answer · 2013-11-14T20-36-00.000Z

Я бы использовал другое, если в обратном порядке. Такие, что:

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

Таким образом выполняется только один, каждый клик, и тот, который выполняется с наиболее возмущенным.

Ой, ты избил меня примерно на 40 секунд, я удалю мою, так как она точно такая же.
У меня было чувство, что ответ на этот вопрос будет гонкой, ха
Мне показалось забавным, что наши ответы были практически идентичны.
Спасибо за помощь мне. Я чувствовал, что ответ был мне в лицо, поэтому я думаю, вы, ребята, доказали, что я прав :)