Переход в следующие два элемента при клике - PullRequest
Новая
       7

Переход в следующие два элемента при клике

0 голосов
/ 25 апреля 2018

Я пытаюсь показать еще два div, каждый раз, когда нажимается кнопка.У меня две проблемы.

  1. Показывает еще один клик (должно отображаться два)
  2. Не повторяется после первого клика

Я уже пробовал с циклом или повтором, но ничего не получалось.Где ошибка? 

$(".button").click(function() {
  $(".content").nextAll(':lt(2)').fadeIn("slow");
});
.hide { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content hide">Content 3</div>
<div class="content hide">Content 4</div>
<div class="content hide">Content 5</div>
<div class="content hide">Content 6</div>
<div class="content hide">Content 7</div>
<div class="content hide">Content 8</div>
<div class="content hide">Content 9</div>
<div class="content hide">Content 10</div>
<div class="button">SHOW ME 2 MORE</div>

Вот моя скрипка: https://jsfiddle.net/x25Ldwaj/1/

1 Ответ

0 голосов
/ 25 апреля 2018

Ваша логика почти на месте, просто неверный селектор. Вам нужно начать с последнего видимого элемента .content, чтобы вы могли использовать :visible:last, например: 

$(".button").click(function() {
  $(".content:visible:last").nextAll('.content:lt(2)').fadeIn("slow");
  $(this).toggle($(".content:visible:last").index() != $('.content').length);
});
.hide { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content hide">Content 3</div>
<div class="content hide">Content 4</div>
<div class="content hide">Content 5</div>
<div class="content hide">Content 6</div>
<div class="content hide">Content 7</div>
<div class="content hide">Content 8</div>
<div class="content hide">Content 9</div>
<div class="content hide">Content 10</div>
<div class="button">SHOW ME 2 MORE</div>
...