0

次のような要素を含むページがあります

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

表示される要素をプラスまたはマイナス 1 で変更する JavaScript 関数が必要です。1 つだけが表示されます。

これは、選択した回答でうまく機能します。文字列を解析する必要があることに気付くまで、localStorage の値に頭を悩ませていました。;)

4

4 に答える 4

1

この例では、トピックに jQuery タグがないため、jQuery を使用していません。（編集、誤解）

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;
    };
};

フィドルの例

于 2013-10-08T12:35:17.033 に答える
0

それを試してみてください。テストはしていません。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");
}
于 2013-10-08T12:24:53.093 に答える