Как сделать следующие и предыдущие кнопки для управления дисплеем div?

Question

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

<div id="p1" style="display:block;"> 
//content goes here 
    <div id="nav"> 
    <img class="imgSwap" id="nextBtn"> 
    </div> 
</div> 
<div id="p2" style="display:none;"> 
//content goes here 
    <div id="nav"> 
    <img class="imgSwap" id="previousBtn"> 
    <img class="imgSwap" id="nextBtn"> 
    </div> 
</div> 
<div id="p3" style="display:none;"> 
//content goes here 
    <div id="nav"> 
     <img class="imgSwap" id="previousBtn"> 
    </div> 
</div> 

При следующем нажатии кнопки на дисплее текущего DIV установлен нет, и на дисплее следующего DIV установлен в блок. Это будет где угодно между 3 или 7 страницами (точное число пока не известно) Но как я сформулирую это в jQuery точно? Я не уверен, как назвать мои divs и адресовать номера в id. Я уже есть Jquery обратиться событие щелчка:

$(function(){ 
    $(".imgSwap").mouseenter(function() { 
     this.src = this.src.replace("_off", "_on"); 
    }).mouseleave(function(){ 
     this.src = this.src.replace("_on", "_off"); 
    }).click(function() { 
     alert("Handler for .click() called."); 
    }); 
}); 

Если это кажется глупым способ представления информации, это потому, что я работаю в наборе, защищенную среду. Я не могу использовать iFrames для этого, например, или презентацию в powerpoint. Я был бы очень признателен вам за это. Благодаря!

Answer 1

Как вы не можете иметь несколько элементов с одинаковыми ID, вы должны изменить кнопки ID на классы:

<img class="imgSwap nextBtn"> 
<img class="imgSwap previousBtn"> 

И делать то же самое с родителями будет легче, а также:

<div class="parent" style="display:block;"> 

А потом сделать:

$(function(){ 
    $(".imgSwap").on({ 
     mouseenter: function() { 
      this.src = this.src.replace("_off", "_on"); 
     }, 
     mouseleave: function() { 
      this.src = this.src.replace("_on", "_off"); 
     }, 
     click: function() { 
      var direction = $(this).hasClass('nextBtn') ? 'next' : 'prev'; 
      $(this).closest('.parent').hide() 
        [direction]('.parent').show(); 
     } 
    }); 
}); 

Проверяется, если кнопка является "следующий" или «Previo us ", а также изменения в методах jQuery next() и prev() соответственно. Скрывает текущий .parent и показывает следующий/предыдущий .parent. Теперь все, что вам нужно сделать, это выяснить, когда нет больше .parent элементов для отображения (подсказка: использование length)

Answer 2

Добавление класса на все ваши страницы (те, с идентификатором «р #»)

Тогда на вашей функции щелчка, сделайте примерно следующее:

var parent = $(this).closest('yourClass') 
parent.css('display', 'none'); 
if(this.id == 'previousBtn'){ 
    parent.prev('yourClass').css('display', 'block') 
else{ 
    parent.next('yourClass').css('display', 'block') 
}