javascript函數發送下一個元素

的整數改變元素的可視性我有元素如javascript函數發送下一個元素

<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的值頭痛，直到我意識到我需要解析字符串。 ;）

來源

2013-10-08 maxwellDTA

這個例子不使用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>

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

來源

2013-10-08 12:35:17

因爲沒有jQuery的標籤的話題同意：35內膽比1班輪 –

當你不更好不想或可以加載jQuery的，可以肯定的是。 – 2013-10-08 13:13:16

這工作好，雖然我們可以提高它作爲我的除了原來的問題注意。 – maxwellDTA

嘗試使用jQuery：

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

或

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

來源

2013-10-08 12:23:08

需要具有知名度改變的div元素是另一個專區內。使用它可以隱藏外部div和其中的所有元素。這怎麼可能進行調整，以對孩子div元素髮揮作用？ – maxwellDTA

$（「分區：可見」）。子女（）隱藏（）... ... –

試一下，但沒有測試，它使用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-08 12:24:53

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/

來源

2013-10-08 12:42:56 GuiDocs

javascript函數發送下一個元素

回答

相關問題