jQuery：在选择更改时隐藏/显示多个 div

Question

在我的表单中，我需要显示/隐藏多个 div，具体取决于选择了 SELECT 中的哪个 OPTION。

我可以运行，但我的问题是，一个 div 可以被许多 OPTIONS 隐藏/显示。因此，使用我的代码，这些 div 会显示/隐藏一段时间，然后再次隐藏/显示。

这是我的 HTML：

<select id="vFormat" name="vFormat" onchange="getval(this);">
    <option value="0">Choose</option>
    <option value="1" class="format1">Option 1</option>
    <option value="2" class="format2">Option 2</option>
    <option value="3" class="format3">Option 2</option>
    <option value="4" class="format4">Option 2</option>
    <option value="5" class="format5">Option 2</option>
</select>

<div class="showdivformat1 showdivformat2 hiddenelement">
   Text of hidden Div
</div>

<div class="hidedivformat2 showdivformat5 visibleelement">
   Text of visible Div
</div>

这是我的 jQuery

function getval(sel) {

    var divval = $('.selectInput option:selected').attr('class').split(' ');

    for(var i=0; i<divval.length; i++){
        $(".hiddenelement").hide("50");
        $(".showdiv" + divval[i]).show("50");
    }

    for(var i=0; i<divval.length; i++){
        $(".visibleelement").show("50");
        $(".hidediv" + divval[i]).hide("50");
    }       
}

我知道问题是，我总是隐藏 .hiddenelement 并在更改选项时显示 .visibleelement。

但我没有解决方案来检查 div 是否已经隐藏或可见，并且在选项更改后应该保持这种状态。

Answer 1

这是一个很好的干净的方法来做你正在做的事情：

HTML：

<select id="vFormat" name="vFormat">
    <option value="0">Choose</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>

<div class="select-default-hidden select-3-shown select-4-shown">
   Shown with options 3 and 4
</div>

<div class="select-default-shown select-4-hidden">
   Shown always, except with option 4
</div>

JavaScript：

$('#vFormat').change(function() {
    $('.select-default-hidden').hide();
    $('.select-default-shown').show();

    $('.select-' + $(this).val() + '-shown').show();
    $('.select-' + $(this).val() + '-hidden').hide();
}).change();

在 JSFiddle 上：https://jsfiddle.net/kd0Lxrgc/1/

使用select-default-hidden 和select-default-shown 添加更多元素，以确定它们是否应该默认隐藏或默认显示，并添加select-X-shown 和select-X-hidden 以使用给定的选定选项显示或隐藏每个元素。

Answer 2

您的问题尚不清楚，但可以通过添加和删除隐藏和显示 div 的类来获得可能的解决方案。

Answer 3

只需设置 jQuery 对象数组。然后当用户更改所选选项时，只需有一个案例，然后循环您要隐藏的 jQuery 对象数组并简单地隐藏它们。

//// Psuedo Code...

var elemGroupOne = [], elemGroupTwo = [];

// push divs to the arrays 
elemGroupOne.push(/* jQuery Object... */);

$("#vFormat").on("change", function(event) {
   var selectedValue = $(this).val();

   switch (selectedValue) {
       case "Option 1":
            // Hide group two..
            for ( i = 0; i < elemGroupTwo.length; i++ ) {
                var el = elemGroupTwo[i];
                $(el).hide();  
            }

            // Show group one..
            for ( i = 0; i < elemGroupOne.length; i++ ) {
                var el = elemGroupOne[i];
                $(el).show();  
            }
           break;

       case "Option 2":
            // Hide group one..
            for ( i = 0; i < elemGroupOne.length; i++ ) {
                var el = elemGroupOne[i];
                $(el).hide();  
            }

            // Show group one..
            for ( i = 0; i < elemGroupTwo.length; i++ ) {
                var el = elemGroupTwo[i];
                $(el).show();  
            }
           break;
   } 
});

您可以轻松地使它比我生成的伪代码更好，但如果我正确理解您的问题，我希望这有助于回答您的问题。

Answer 4

你可以试试这个：

<div class="showdivformat1 showdivformat2 hiddenelement" id="div1">
  Text of hidden Div
</div>

<div class="hidedivformat2 showdivformat5 visibleelement" id="div2">
  Text of visible Div
</div>


function getval() {

    var divs = document.getElementsByTagName("div");

for(var i=0; i<divs.length; i++){
    $("#div"+i).hide("50");
    $("#div"+i+1).show("50");//any other way to identify ur identity of div and u are done
}

for(var i=0; i<divval.length; i++){
    $(".visibleelement").show("50");
    $(".hidediv" + divval[i]).hide("50");
}       
}

如果解决了请告诉我。