是否可以使用顯示/隱藏javascript來顯示具有相同onclick命令的2個元素？

Question

以下腳本是顯示/隱藏元素的基本javascript。我的問題是，如果我可以用相同的onclick函數顯示2個元素？這是可能的，如果是的話，我應該如何編寫我的代碼，使其工作，因爲我的變化都沒有工作？非常感謝提前！

<script type="text/javascript"> 

    function showStuff(id) { 
     document.getElementById(id).style.display = 'block'; 
    } 
    function hideStuff(id) { 
     document.getElementById(id).style.display = 'none'; 
    } 

    </script> 

    <a href="#" onclick= "{black1(); red1();}; {showStuff('character1', 'character1-img'); hideStuff('character2');}">1</a> 

Answer 1

將一個數組作爲參數傳遞，而不是一個單一的ID，只是循環顯示/隱藏每個ID。像

function showStuff(ids) { 
    var len = ids.length, 
     id; 

    for (var i = 0; i < len; i++){ 
     id = ids[i]; 
     document.getElementById(id).style.display = 'block'; 
    }  
} 

Answer 2

function showStuff(id) { 
    var args = Array.prototype.slice.call(arguments, 0); 
    document.getElementById(args.pop()).style.display = 'block'; 
    if (args.length) showStuff.apply(null, args); 
}​ 

此功能會有些遞歸調用本身當你通過多個ID，顯示每個元素，直到一個也不剩。

你會像這樣使用它：showStuff('firstID', 'secondID', 'thirdID')（這是你在你的例子中已經做了什麼）。

http://jsfiddle.net/kennis/vg9Z4/

Answer 3

你可以試試這個：

<a href="#" onclick= "black1();red1();showStuff('character1');showStuff('character1-img');hideStuff('character2');">1</a> 

但是你最好不要有這樣的：在你的腳本

<a href="#" onclick= "clickedLink123();">1</a> 

有了這個：

function clickedLink123() { 
    black1(); 
    red1(); 
    showStuff('character1'); 
    showStuff('character1-img'); 
    hideStuff('character2'); 
} 

Answer 4

除非是有效的JavaScript，否則您可以在JavaScript中進行任何操作。

你可以有一個函數說onAnchorClick，你可以調用錨定點擊並傳遞元素顯示/隱藏爲一個數組，然後在這個函數內執行你的邏輯。

<a href="#" onclick= "onAnchorClick(['character1', 'character1-img'], ['character2']);">1</a> 

的js

function onAnchorClick(elementsToShow, elementsToHide){ 
    //do stuff here  
    black1(); 
    red1(); 

    if(elementsToShow){ 
     showStuff(elementToShow); 
    } 
    if(elementsToHide){ 
     hideStuff(elementToShow); 
    } 
} 
function showStuff(ids) { 
    for (var i = 0; i < ids.length; i++) 
     document.getElementById(id[i]).style.display = 'block'; 
    } 
} 
function hideStuff(ids) { 
    for (var i = 0; i < ids.length; i++) 
     document.getElementById(ids[i]).style.display = 'none'; 
    } 
}