Javascript 简单开关箱不工作

下面是使用switch case更改按钮操作上div显示的简单代码。 请看一看，我没有弄错什么地方

链接：

javascipt代码：

$(document).on('click', ".change", function() {
  var $input = $(this);
  $(".same").each(function() {
    if ($(this).css("display") == "block") {
      $(this).css("display", "none");
    }
  });
  switch ($input.attr("id")) {
    case "b1":
      $("#abc").css("display", "block");
      break;
    case "b2":
      $("#xyz").css("display", "block");
      break;
  }
});

---

正如评论中指出的，您的代码按原样工作。您只是忘记添加jQuery库，选择器hello和bye不存在。除此之外，您还过度复杂化了代码。在jQuery中，隐藏元素之前不必检查元素是否可见，只需隐藏它即可。当使用类选择器时，您不必对其运行每个类选择器，以获得jQuery自己的内部函数，例如hide；jQuery将隐藏该类的所有元素

---

你没有出示正确的身份证。我还认为您忘记了在代码中设置JQuery链接，这就是为什么它给出了引用错误

以下是更新的代码：

$document.on'click'，.change，function{ var$input=$this； $.same.eachfunction{ 如果$this.cssdisplay==block{ $this.cssdisplay，无； } } 开关$input.attrid{ 案例b1:$abc.css显示，块； 打破 案例b2:$xyz.cssdisplay，块； 打破 } } .一样{ 显示：无； 宽度：400px； 高度：200px； 边框：1px实心； } abc{ 显示：块； } xyz{ 显示：无； } 你好 再见 b1 b2

---

使用对象可以使它变得更简单。将引用存储到 选择器在对象中这样可以避免切换情况。尽管使用和方法来显示和隐藏元素

// object which holds the reference
var sel = {
  b1: "#abc",
  b2: "#xyz"
};
$(document).on('click', ".change", function() {
  // hide all elements initially there is no need to iterate over them
  $(".same").hide();
  // get selector from object using id and show the element
  $(sel[this.id]).show();
})

$document.on'click'，.change，function{ var sel={ b1:abc， b2:xyz }; $.same.hide； $sel[this.id].show； } .一样{ 显示：无； 宽度：400px； 高度：200px； 边框：1px实心； } abc{ 显示：块； } xyz{ 显示：无； } 你好 再见 b1 b2

---

如果您想控制在html中显示/隐藏什么，我建议使用以下方法：

$'body'。单击时，'[data hide]'，函数E{ $$this.data'hide'。hide； }; $'body'。单击，'[data show]'，函数E{ $$this.data'show'.show； }; .一样{ 显示：无； 宽度：100%； 高度：100px； 边框：1px纯黑； } abc{ 显示：块； } 你好 再见 表演哈罗

再见

---

您是否忘记在代码中包含jquery库链接？如果我将jquery添加到库中，并将abc和xyz而不是hello和bye放在其中，那么jsiddle对我来说是有效的@progyms我只是忘记了用abc和xyz复制粘贴更新的代码，是的，我忘记了添加jquery库。thn使用对象存储相应的选择器。。。这样既可以简化操作，又可以避免切换case@geeksal是的，事实上这就是问题所在。这个看起来很容易理解。如果我有10个div，并且所有的div都带有display:block，这个会起作用吗？我希望这个空间再次被覆盖是的，它会被覆盖，只要你想显示的div具有相同的类。我喜欢这个答案。我想知道什么是最快的。对象或开关语句。

// object which holds the reference
var sel = {
  b1: "#abc",
  b2: "#xyz"
};
$(document).on('click', ".change", function() {
  // hide all elements initially there is no need to iterate over them
  $(".same").hide();
  // get selector from object using id and show the element
  $(sel[this.id]).show();
})