jQuery событие щелчка стрелять несколько раз

Я пытаюсь показать div один за другим, когда нажата кнопка «add_more». Первый щелчок работает так, как мне бы хотелось, но во втором щелкнете все divs show.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 секунд, я удалю, так как это точно так же. –

У меня было ощущение, что этот вопрос будет гонке hah – 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 событие щелчка стрелять несколько раз

ответ

Смежные вопросы