Javascript функции, чтобы изменить видимость элементов, отправив число следующего элемента

Question

У меня есть страница с такими элементами как

<div id="div1" style="display: block;">Stuff</div> 
<div id="div2" style="display: none;">Stuff</div> 
<div id="div3" style="display: none;">Stuff</div> 
<div id="div4" style="display: none;">Stuff</div> 
<div id="div5" style="display: none;">Stuff</div> 
<div id="div6" style="display: none;">Stuff</div> 
<div id="div7" style="display: none;">Stuff</div> 

Мне нужна яваскрипт функция, которая будет изменять видимый элемент, плюс или минусе один. Только один должен быть виден.

Это хорошо работает с выбранным ответом. У меня была головная боль с значением localStorage, пока я не понял, что мне нужно разбирать строку. ;)

Answer 1

Этот пример не использует JQuery только потому, что есть нет тега jQuery в теме. (Edit, непонятым)

HTML

<a href="" id="plus">+</a><a href="" id="minus">-</a> 
<div class="plusable" style="display: block;">Stuff1</div> 
<div class="plusable" style="display: none;">Stuff2</div> 
<div class="plusable" style="display: none;">Stuff3</div> 
<div class="plusable" style="display: none;">Stuff4</div> 
<div class="plusable" style="display: none;">Stuff5</div> 
<div class="plusable" style="display: none;">Stuff6</div> 
<div class="plusable" style="display: none;">Stuff7</div> 

JS

window.onload = function() { 
    var plusButton = document.getElementById('plus'); 
    var minusButton = document.getElementById('minus'); 
    var plusables = document.getElementsByClassName('plusable'); 
    var current = 0; 

    function hideCurrent() { 
     plusables[current].style.display = 'none'; 
    } 

    function showCurrent() { 
     plusables[current].style.display = 'block'; 
    } 

    plusButton.onclick = function() { 
     if (current === plusables.length - 1) { 
      return false; 
     } 

     hideCurrent(); 
     current += 1; 
     showCurrent(); 
     return false; 
    }; 

    minusButton.onclick = function() { 
     if (current === 0) { 
      return false; 
     } 
     hideCurrent(); 
     current -= 1; 
     showCurrent(); 
     return false; 
    }; 
}; 

Example fiddle

Answer 2

Попробуйте использовать jQuery:

$("div:visible").hide().next().show(); 

или

$("div:visible").hide().previous().show(); 

Answer 3

Попробуйте сделать это, но не проверял, он использует JQuery

function changeVisible(var divID, var operation) 
{ 
    //Get the new div id 
    var n=divID.split("div"); 
    if (operation == "+") 
     var divNumber = parseInt('n[1]',10) + 1; 
    else if (operation == "-") 
     var divNumber = parseInt('n[1]',10) - 1; 
    var newDIV = "div"+divNumber; 

    //Using JQuery 
    $("#"+newDIV).css("display","block"); 
    $("#"+divID).css("display","none"); 
} 

Answer 4

displayed это номер DIV отображается в данный момент, начиная с 0 (так div1 имеет число 0,...)

howmany означает, сколько див у вас есть в цикле

var displayed = 0; 
var howmany = 7; 
function mod(a,b){ 
    return ((a%b)+b)%b; 
} 
function f(amount){ 
    var div = document.querySelector("#div"+(displayed + 1)); 
    div.style.display = "none"; 
    displayed = mod(displayed + amount , howmany); 
    var div = document.querySelector("#div"+(displayed + 1)); 
    div.style.display = "block"; 

} 
document. 
querySelector("#addOne"). 
addEventListener("click", function() {f(1)}); 
document. 
querySelector("#subOne"). 
addEventListener("click", function() {f(-1)}); 

http://jsfiddle.net/uSkq4/2/