JavaScript 函数通过发送下一个元素的整数来更改元素的可见性

javascript function to change visibility of elements by sending the integer of the next element

本文关键字：元素 整数 可见性 下一个 函数 JavaScript      更新时间：2023-09-26

>我有一个包含元素的页面，例如

<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 值感到头疼，直到我意识到我需要解析字符串。;)

这个例子没有使用jQuery，只是因为主题中没有jQuery-tag。(编辑，误解(

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

示例小提琴

尝试使用 jQuery：

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

或

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

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

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

相关文章：