使用onclick和複選框切換課程

我正在爲網站製作庫存頁面。我希望能夠用複選框對項目進行排序。我想我需要的是將div類應用於它們中的每一個，並使用document.getElementsByClassName將顯示更改爲無需爲我想隱藏的顯示。使用onclick和複選框切換課程

無論如何，我試着用document.getElementsById，但我只能改變第一個與相應的ID。顯然我需要改變班級。這是我現在的地方。

P.S [sc：1]是wordpress的shortcoder。這似乎工作時，我用Id。

<script> 
function toggle() { 
     var e = document.getElementsByClassName('truck'); 
     if(e.style.display == "block") 
      e.style.display = "none"; 
     else 
      e.style.display = 'block'; 
    } 
</script> 
<input type="checkbox" id="checkme" onclick="toggle()">Dump Truck 
<div class="truck">This is text that should hide</div> 
<div class="truck">[sc:1 ]</div> 
<div class="sweeper">[sc:2 ]</div> 
<div class="sweeper">[sc:3 ]</div>

來源

2014-07-20 user2631279

你還沒有解釋你的問題是什麼 – charlietfl

你必須在一組迭代是document.getElementsByClassName('truck');回報：

for (var i = 0; i < e.length; i++) { 
    if(e[i].style.display == "block") 
     e[i].style.display = "none"; 
    else 
     e[i].style.display = 'block'; 
}

document.getElementsByClassName返回一組相匹配的類名的元素，讓你有DOM元素的數組：[elem1, elem2, elem3, ..]。您不能只是簡單地設置[].display == prop - 您必須迭代該設置並設置每個元素的顯示。

來源

2014-07-20 00:10:43 tymeJV

謝謝。似乎工作。如果你願意解釋你的代碼究竟發生了什麼，我會很感激。這裏是初學者的位。 – user2631279

@ user2631279 - 我在答案 – tymeJV

中添加了一個快速解釋。感謝大家的時間。 – user2631279

document.getElementsByClassName（'truck'）;總是返回所有具有「track」類的元素的數組列表，即使您有一個具有「truck」類的單個元素，getElementsByClassName（'truck'）也會返回數組中的單個元素。

請注意，獲取**元素** ByClassName具有複數形式的元素，它指向一組元素項目被提取。

對於您的情況，您必須迭代數組項以獲取每個元素並執行操作。

試試下面的代碼塊，而不是

<script> 
function toggle() { 
    var e = document.getElementsByClassName('truck'); 
    // Get all the elements that has the class name 'truck', so for your example, 
    // there are 2 items and the array e would have 2 items (i.e. e[0] will have the 
    // div element that has 'This is text that should hide' as the inner HTML and e[1] 
    // will have the div element that has [sc:1 ] as the inner HTML 

    for (var x=0; x < e.length; x++) { 
     if(e[x].style.display == "block") // Get the xth element's style 
      e[x].style.display = "none"; 
     else 
      e[x].style.display = 'block'; 
    } 
} 
</script>

請注意，即使你有與類名的單個項目「卡車」，你會發現它的返回數組的第0個位置（即E [ 0]）。

來源

2014-07-20 00:17:48

使用onclick和複選框切換課程

回答

相關問題