基於getelementsbyclassname選擇選項來顯示/隱藏div

Question

我試圖讓div在選擇窗體選擇菜單時切換樣式屬性。任何幫助將是偉大的！

有代碼：

選擇標籤（這裏我有值的腳本函數）：

<div style="float: right; margin-right: 5%; width: auto;"> 
     <select style="border: 3px intset; border-radius: 5px; border-color: #17FFFF;" onchange="showstuff(this.value);"> 
      <optgroup label="Lisboa"> 
       <option value="Picoas">Picoas</option> 
       <option value="Benfica">Benfica</option> 
      </optgroup> 
      <optgroup label="Porto"> 
       <option value="Felgueiras">Felgueiras</option> 
       <option value="Maia">Maia</option> 
      </optgroup> 
     </select> 
    </div> 

div的與類名：

<div style="width: 90%; height: 50%; background-color: #09C; overflow: scroll; overflow-x: hidden; margin-bottom: 15%; margin-left: 5%; margin-right: 5%; text-align: left; color: #000; font-size: 60%;"> 
    <div class="Picoas" style="height: 30%; width: 100%; background-color: #CCEAFF; display:none;"> 
     Timberland Picoas<br /> 
     Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br /> 
     1500-392 Lisboa 
    </div> 
    <div class="Felgueiras" style="height: 30%; width: 100%; background-color: #CCEAFF; 
     margin-top: 2%;display:none;"> 
     Timberland Felgueiras<br /> 
     Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br /> 
     1500-392 Lisboa 
    </div> 
    <div class="Picoas" style="height: 30%; width: 100%; background-color: #CCEAFF; margin-top: 2%;display:none;"> 
     Timberland Picoas<br /> 
     Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br /> 
     1500-392 Lisboa 
    </div> 
    <div class="Felgueiras" style="height: 30%; width: 100%; background-color: #CCEAFF; 
     margin-top: 2%;display:none;"> 
     Timberland Felgueiras<br /> 
     Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br /> 
     1500-392 Lisboa 
    </div> 
    <div class="Benfica" style="height: 30%; width: 100%; background-color: #CCEAFF; margin-top: 2%;display:none;"> 
     Timberland Benfica<br /> 
     Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br /> 
     1500-392 Lisboa 
    </div> 
    <div class="Maia" style="height: 30%; width: 100%; background-color: #CCEAFF; margin-top: 2%;display:none;"> 
     Timberland Maia<br /> 
     Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br /> 
     1500-392 Lisboa 
    </div> 
    <div class="Benfica" style="height: 30%; width: 100%; background-color: #CCEAFF; margin-top: 2%;display:none;"> 
     Timberland Benfica<br /> 
     Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br /> 
     1500-392 Lisboa 
    </div> 
    <div class="Maia" style="height: 30%; width: 100%; background-color: #CCEAFF; margin-top: 2%;display:none;"> 
     Timberland Picoas<br /> 
     Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br /> 
     1500-392 Lisboa 
    </div> 
</div> 

的腳本和類定義：

<script type="text/javascript"> 
    function showstuff(element) { 
     var elementsPicoas = document.getElementsByClassName("Picoas"); 
     elementsPicoas.style.display = element == "Picoas" ? "block" : "none"; 
     var elementsBenfica = document.getElementsByClassName("Benfica"); 
     elementsBenfica.style.display = element == "Benfica" ? "block" : "none"; 
     var elementsFelgueiras = document.getElementsByClassName("Felgueiras"); 
     elementsFelgueiras.style.display = element == "Felgueiras" ? "block" : "none"; 
     var elementsMaia = document.getElementsByClassName("Maia"); 
     elementsMaia.style.display = element == "Maia" ? "block" : "none"; 
    } 
</script> 
    <style> 
    .Picoas{} 
    .Felgueiras{} 
    .Benfica{} 
    .Maia{} 
    </style> 

Answer 1

以下是如何在沒有jQuery的情況下做到的！

function showstuff(selectedElementClass) { 

    var elementClasses = [ 
     "Picoas", 
     "Benfica", 
     "Felgueiras", 
     "Maia" 
    ]; 

    for (var i = 0; i < elementClasses.length; i++) { 
     var elements = document.getElementsByClassName(elementClasses[i]); 

     for (var j = 0; j < elements.length; j++) { 
      var element = elements[j]; 
      element.style.display = (element.className === selectedElementClass)? "block" : "none"; 
     } 
    } 
} 

你可以看到它在這裏的行動：https://tinker.io/38459/3

Answer 2

我會建議使用jQuery，使您能夠做的東西一樣

$(".Picoas, .Benfica, .Felgueiras, .Maia").hide(); //hide them all 
$("." + element).show(); //display only the selected one 

更新

對不起，這是太快了。真正的問題是，getElementsByClassName函數返回多個元素，因爲您有代碼中檢查2次的所有類。

你可以做的是 - 如果你不想使用jQuery - 是這樣的：

function display(className, mode) 
{ 
    var elms = document.getElementsByClassName(className); 

    for (var i = 0; i < elms.length; i++) 
    { 
     elms[i].style.display = mode; 
    } 

} 

function showstuff(element) 
{ 
    //hide 'em all 
    var allElements = ["Picoas", "Benfica", "Felgueiras", "Maia"]; 

    for (var i = 0; i < allElements.length; i++) 
    { 
     display(allElements[i], "none"); 
    } 

    //show the one selected 
    display(element, "block"); 
} 

Answer 3

更有效的方式使用jQuery做到這一點：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#changeme").change(function(){ 
    $(".dynamic").css("display", "none"); 
    $("."+this.value).css("display", "block"); 
    }); 
}); 
</script> 

<style> 
.dynamic 
    { 
     height: 30%; 
     width: 100%; 
     background-color: #CCEAFF; 
     margin-top: 2%; 
     display:none; 
    } 
.Picoas{} 
.Felgueiras{} 
.Benfica{} 
.Maia{} 
</style> 

<div class="Picoas dynamic"> 
    Timberland Picoas<br /> 
    Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br /> 
    1500-392 Lisboa 
</div> 
<div class="Felgueiras dynamic"> 
    Timberland Felgueiras<br /> 
    Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br /> 
    1500-392 Lisboa 
</div> 
(etc.) 

http://jsbin.com/welcome/47377/edit