prev - следующий динамический показ контента с jquery

Question

Я пытаюсь сделать предыдущее - следующее скольжение между контентом на странице. У меня есть следующая разметка:

<div class="right">
     <a href="javascript:;" class="light-button" id="previous-button">Previous</a>
     <a href="javascript:;" class="light-button" id="next-button">Next</a>
 </div>
 <?php foreach ($chapters as $chapter) : ?>
 <div id="chapters-container-<?php echo $chapter->id; ?>" style="display: none">
     <div class="left">
         <h1 class="hmc"><?php echo $chapter->title; ?></h1>
     </div>
     <ul class="attachments scroll-pane">
     <?php foreach ($chapter->files as $file) : ?>
     <!--video zone-->
         <?php if ($file->extension == '.mpeg') : ?>
         <li class="wide">
             <img src="" />
             <span class="duration hmc"><?php $file->duration; ?></span>
             <h1 class="hmc">The title is a title</h1>

         </li>
         <?php endif; ?>                              
     <?php endforeach; ?>
     </ul>
</div>
<?php endforeach; ?>
</div>

По сути, я генерирую некоторый контент динамически с помощью PHP. Я обернул каждый контент, созданный в div, и я не отображаю его только с помощью jQuery. Теперь я попытался сделать что-то вроде:

$('body').on('click', 'a#next-button', function(){
    $('#chapters-container-').next();
});

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

Answer 1

Я думаю, что вы не получаете то, что делает

$('#chapters-container-').next(); 

.Это, в соответствии с документацией,

Получите непосредственно следующего брата каждого элемента в наборе соответствующих элементов.Если указан селектор, он получает следующий брат, только если он соответствует этому селектору.

, поэтому вы просто выбираете следующий элемент после элемента с id = chapters-container-

Вы должны сделать что-то вроде:

$('body').on('click', 'a#next-button', function(){ 
  var visisbleContainer = $('div[id^=chapters-container-]:visible');
  visisbleContainer.next().show();
  visisbleContainer.hide(); 
});

Answer 2

когда пользователь нажимает на следующую кнопку, он получает видимый атрибут идентификатора div (главы). Вы получите идентификатор главы, добавьте 1 к этому идентификатору главы и сгенерируйте другую строку, например chapters-container-2.

Теперь скрываем текущий div и показываем div сгенерированной строки, т.е. $ ('#' + newstring) .show ()