根据下拉选择显示/隐藏div - jquery

Question

根据下拉选择显示/隐藏div - jquery

3

我正在尝试制作一个时间轴，在其中，如果您从下拉选择框中选择一个项目，它将仅显示该选择（时代）的信息。我找到了这个代码，它让我可以做到这一点，但是一旦我添加了一些自己的东西，它就停止工作了。我想知道为什么会发生这种情况，以及如何修复它。完整代码：

<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
    $(this).find("option:selected").each(function(){
        if($(this).attr("value")=="red"){
            $(".box").not(".red").hide();
            $(".red").show();
        }
        else if($(this).attr("value")=="green"){
            $(".box").not(".green").hide();
            $(".green").show();
        }
        else if($(this).attr("value")=="blue"){
            $(".box").not(".blue").hide();
            $(".blue").show();
        else if($(this).attr("value")=="maroon"){
            $(".box").not(".maroon").hide();
            $(".maroon").show();
        else if($(this).attr("value")=="magenta"){
            $(".box").not(".magenta").hide();
            $(".magenta").show();
        }
        else{
            $(".box").hide();
        }
    });
}).change();
});
</script>
</head>
<body>
<div>
    <select>
        <option>Choose Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
        <option value="maroon">maroon</option>
        <option value="magenta">magenta</option>
    </select>
</div>
<div class="red box">
</div>
<div class="green box">hello</div>
<div class="blue box">talofa</div>
<div class="maroon box"> <h2>BURGANDY!</h2></div>
<div class="magenta box"> <h2>PINK!</h2></div>

编辑：我对JavaScript和JQuery非常陌生（从未使用过任何一个），因此需要解释说明！

- user6402722

你在else附近缺少一些闭合括号。 - Pedro Lobito

天啊，我感觉自己很蠢。谢谢，老兄！学习JS已经是漫长的一天了 xD 非常感谢！ - user6402722

这种情况发生在每个人身上，祝好运！ - Pedro Lobito

4个回答

2

你的else语句缺少一些闭合括号。找一个好的JavaScript IDE，比如sublime，同时确保你阅读控制台消息。

$(document).ready(function(){
$("select").change(function(){
    $(this).find("option:selected").each(function(){
        if($(this).attr("value")=="red"){
            $(".box").not(".red").hide();
            $(".red").show();
        }else if($(this).attr("value")=="green"){
            $(".box").not(".green").hide();
            $(".green").show();
        }else if($(this).attr("value")=="blue"){
            $(".box").not(".blue").hide();
            $(".blue").show();
        }else if($(this).attr("value")=="maroon"){
            $(".box").not(".maroon").hide();
            $(".maroon").show();
        }else if($(this).attr("value")=="magenta"){
            $(".box").not(".magenta").hide();
            $(".magenta").show();
        }else{
            $(".box").hide();
        }
    });
}).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <select>
        <option>Choose Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
        <option value="maroon">maroon</option>
        <option value="magenta">magenta</option>
    </select>
</div>
<div class="red box">Redish!</div>
<div class="green box">hello</div>
<div class="blue box">talofa</div>
<div class="maroon box"> <h2>BURGANDY!</h2></div>
<div class="magenta box"> <h2>PINK!</h2></div>

- Pedro Lobito

0

其他答案已经解释了打字错误的问题。

这里提供一个更简单的版本

修复了代码并添加了初始隐藏全部CSS

$(function() {
  $("select").on("change", function() {
    const val = this.value
    $(".box").not("." + val).hide();
    $("." + val).show();
  }).change();
});

.box {
  display: none;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.maroon {
  background-color: maroon;
}

.magenta {
  background-color: magenta;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <select>
    <option>Choose Color</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="maroon">maroon</option>
    <option value="magenta">magenta</option>
  </select>
</div>
<div class="red box">Red</div>
<div class="green box">Green</div>
<div class="blue box">Blue</div>
<div class="maroon box">
  <h2>Maroon!</h2>
</div>
<div class="magenta box">
  <h2>Magenta!</h2>
</div>

- mplungjan

-1

试试这个：

$(document).ready(function(){
  // Use className or Id instead of direct tag name
  $('.choose-color').on('change', function() {
    var val = $(this).val();
    var box = $('.box');

    box.hide(); // hide all boxes

    $('.' + val).show(); // show the current one

  })
});

参考链接：http://jsbin.com/zocipil/edit?html,output

- Surender Lohia

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sandeep Nayak · Accepted Answer

您有几个语法错误。您没有使用}关闭else if。您可能需要检查console以了解这些错误。

此外，不确定为什么要使用$(this).find("option:selected").each(function(){...，因为任何给定时间只能选择一个选项。

以下是可工作的代码。

$(document).ready(function() {
  $("select").change(function() {
    var color = $(this).val();
    if (color == "red") {
      $(".box").not(".red").hide();
      $(".red").show();
    } else if (color == "green") {
      $(".box").not(".green").hide();
      $(".green").show();
    } else if (color == "blue") {
      $(".box").not(".blue").hide();
      $(".blue").show();
    } else if (color == "maroon") {
      $(".box").not(".maroon").hide();
      $(".maroon").show();
    } else if (color == "magenta") {
      $(".box").not(".magenta").hide();
      $(".magenta").show();
    } else {
      $(".box").hide();
    }
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select>
    <option>Choose Color</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="maroon">maroon</option>
    <option value="magenta">magenta</option>
  </select>
</div>
<div class="red box">
</div>
<div class="green box">hello</div>
<div class="blue box">talofa</div>
<div class="maroon box">
  <h2>BURGANDY!</h2>
</div>
<div class="magenta box">
  <h2>PINK!</h2>
</div>