javascript - 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