Появление блока по 1 дополнение

165

26 декабря 2018, 02:00

Есть много одинаковых контейнеров, все они скрыты изначально.

Мне надо сделать так, что бы при клике на кнопку появлялся один из них, при клике еще один раз, появлялся еще один и тд.

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

var count = 0; 
$('button').click(function() { 
  $('.content').eq(count++).show(); 
});

.content { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button>Добавить контент</button> 
<div class="content"><input type="text"></div> 
<div class="content"><input type="text"></div> 
<div class="content"><input type="text"></div> 
<div class="content"><input type="text"></div> 
<button>Добавить контент</button> 
<div class="content"><input type="text"></div> 
<div class="content"><input type="text"></div> 
<div class="content"><input type="text"></div> 
<div class="content"><input type="text"></div>

Answer 1

как можно выйти из положения?

Можно придумать множество способов, но логичнее будет заключить кнопку и целевые div-ы в общий контейнер.

$('button').click(function() { 
  $(this).siblings('.content') 
         .not(":visible") 
         .first() 
            .show(); 
}); 
 
$(".btn-hide").click(function(){ 
  $(this).closest('.content').hide(); 
});

.content { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
  <button>Добавить контент</button> 
  <div class="content"> 
    <input type="text"> 
    <button class="btn-hide">hide</button> 
  </div> 
  <div class="content"><input type="text"></div> 
  <div class="content"><input type="text"></div> 
  <div class="content"><input type="text"></div> 
</div> 
<div> 
  <button>Добавить контент</button> 
  <div class="content"><input type="text"></div> 
  <div class="content"><input type="text"></div> 
  <div class="content"><input type="text"></div> 
  <div class="content"><input type="text"></div> 
</div>