javascript - 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>

我需要一个 javascript 函数，它将可见元素更改加减一。只有一个应该是可见的。

这适用于所选答案。我对 localStorage 值感到头疼，直到我意识到我需要解析字符串。;)

Answer 1

This example uses no jQuery just because there is no jQuery-tag in topic. (Edit, misunderstood)

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

displayed是当前显示的 div 的编号，从 0 开始（div1数字 0 也是如此，div2是 1 ...）

howmany表示您在循环中有多少个 div

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/

Answer 4

尝试但未测试，它使用 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");
}