什麼是使用getElementByClass隱藏多個元素的替代方法？

我有一個頁面，有幾個鏈接，我希望能夠切換兩個按鈕。它使用一個鏈接，使用getElementById，但我需要切換它們的幾組。我從這開始，但沒能奏效。我聽說getElementByClass可以處理除IE之外的所有內容，但我使用的是Opera 11.5，但它仍然無法工作。我已經做了一些搜索，但我對javascript有點新，並且不瞭解大多數解釋。有人可以幫助我一個簡單的選擇，或幫助我解決我所做的一個問題？這是我正在使用的測試頁面。什麼是使用getElementByClass隱藏多個元素的替代方法？

<head> 
<script type="text/javascript"> 
function hideNames() 
{ 
document.getElementByClass("webname").style.display="none"; 
} 
function showNames() 
{ 
document.getElementByClass("webname").style.display="inline"; 
} 
</script> 
</head> 
<body> 
<p class="webname">Webname</p> 
<p class="webname">test</p> 
<input type="button" onclick="hideNames()" value="Hide Web Names" /> 
<input type="button" onclick="showNames()" value="Show Web Names" /> 
</body>

來源

2011-09-02 Casey O' Riordan

（一）'getElementByClass'不存在。（b）即使你使用了正確的方法，你仍然需要迭代該方法返回的所有元素。 –

可能的重複[我們在javascript中getElementsByClassName？]（http://stackoverflow.com/questions/1818865/do-we-have-getelementsbyclassname-in-javascript） –

您需要修復代碼以使用正確的函數名稱並將該函數的返回結果作爲數組處理。它應該可以很好地工作，除非在非常舊的瀏覽器中沒有getElementsByClassName（這是IE瀏覽器的所有版本，直到IE9）。有些替代品可以用來代替效率不高的工作，但可以通過篩選文檔中的所有標籤進行工作。

如果你只想要一個單一的元素，然後使用document.getElementById("idvalue")和操作一個id而不是類名稱。即使在舊版瀏覽器中也支持getElementById。

下面是你的代碼可以使用類名工作：

<head> 
<script type="text/javascript"> 
function hideNames() 
{ 
    var list = document.getElementsByClassName("webname"); 
    for (var i = 0; i < list.length; i++) { 
     list[i].style.display="none"; 
    } 
} 

function showNames() 
{ 
    var list = document.getElementsByClassName("webname"); 
    for (var i = 0; i < list.length; i++) { 
     list[i].style.display="block"; 
    } 
} 

</script> 
</head> 
<body> 
<p class="webname">Webname</p> 
<p class="webname">test</p> 
<input type="button" onclick="hideNames()" value="Hide Web Names" /> 
<input type="button" onclick="showNames()" value="Show Web Names" /> 
</body>

附： <p>標籤顯示：塊，不顯示：內聯。

對於舊版瀏覽器，最好的辦法是使用預先構建的選擇器引擎，它將爲您解決所有跨瀏覽器問題。我用過YUI，jQuery和Sizzle（Sizzle是YUI和jQuery中的選擇器引擎）。所有都是免費的，非常好。

如果您必須保留原生javascript，您也可以爲自己的getElementsByClassName實現獲取一些代碼。這裏有一些來源：http://ejohn.org/blog/getelementsbyclassname-speed-comparison/和http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/。

要告訴你這一切是多麼簡單的使用jQuery，下面是整個代碼：http://jsfiddle.net/jfriend00/qP3XZ/。

的HTML是這樣的：

<p class="webname">Webname</p> 
<p class="webname">test</p> 
<input id="hide" type="button" value="Hide Web Names" /> 
<input id="show" type="button" value="Show Web Names" />

的代碼是這樣的：

$(document).ready(function() { 
    $("#hide").click(function() { 
     $(".webname").hide(); 
    }); 

    $("#show").click(function() { 
     $(".webname").show(); 
    }); 
});

來源

2011-09-02 06:03:00 jfriend00

你的腳本工作完美。我也會研究jQuery在我的網站上使用。謝謝您的幫助。 –

我爲您添加了一個jQuery示例，以便我的答案結束。 – jfriend00

而且它會返回一組需要迭代的項目，所以我懷疑你的代碼會工作。但是，你可能想看看唉jQuery的簡化了這種代碼大幅

來源

2011-09-02 05:53:27 Doogal

你可以使用jQuery並選擇具有相同類的所有元素：

$('.myclass').onclick(function() { 
    ...some instruction... 
});

或者相同的元素：

$('button').onclick(function() { 
    ...some instruction... 
});

來源

2011-09-02 05:55:59 jbrond

我會研究jQuery。謝謝。 –

什麼是使用getElementByClass隱藏多個元素的替代方法？

回答

相關問題