исчезать два или более div один за другим после нажатия кнопки

Я хочу, чтобы первый div исчез, а следующий div исчез.

Если я нажму кнопку второго div a, второй div должен исчезнуть, а третий div должен исчезнуть.

Я пробую этот JS:

    $(function () {
        var fragen_gesamt = $('.dmd-container-frage').length;
        $('.dmd-container-frage').hide();
        $('.dmd-container-frage:first-child').show();
        $('.btn').on('click', function () {
            $('.dmd-container-frage:first-child').fadeOut(500, function () {
                $(this).next('.dmd-container-frage').fadeIn(1000);
            });
        });
    });

Но он исчезает только до второго div.

https://jsfiddle.net/neo3d0m2/


javascript jquery fadein fadeout fade
person cgee    schedule 26.04.2016    source источник
comment
может быть проблема в классе .dmd-container-frage: first-child, потому что вы всегда вызываете next () из first-child   -  person daremachine    schedule 26.04.2016

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно изменить селектор в функции щелчка. Теперь вы находите первый блок и переходите дальше (который является вторым), вам нужно найти родителя нажатой кнопки и выполнить остальную логику в соответствии с этим элементом:

    $(function() {
      var fragen_gesamt = $('.dmd-container-frage').length;
      $('.dmd-container-frage').hide();
      $('.dmd-container-frage:first-child').show();
      $('.btn').on('click', function() {
        $(this).closest('.dmd-container-frage').fadeOut(500, function() {
          var $el = $(this).next('.dmd-container-frage');
          // Check if there is next element
          if ($el.length) {
            $(this).next('.dmd-container-frage').fadeIn(1000);
          } else {
            alert('done!')
          }

        });
      });

    });

Оцените эту скрипку - скрипку

person t1m0n    schedule 26.04.2016
comment
Замечательно. Можете ли вы сказать мне, как я могу показать предупреждающее сообщение, если был нажат последний div? Мое намерение - после нажатия последнего div пользователь должен перенаправить на другую страницу. - person cgee; 26.04.2016