Question

这是使用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;
  }
});

Answer 1

正如评论中指出的那样，您的代码按原样运行。您只是忘了添加jQuery库，而选择器#hello和#bye不存在。除此之外，您的代码也过于复杂。在jQuery中，您不必在隐藏元素之前检查元素是否可见，您可以隐藏它。当使用类选择器时，您不必为jQuery自己的内部函数（例如.each）运行hide(); jQuery将使用此类隐藏所有元素。

https://jsfiddle.net/r6nkuwvc/5/

$(document).on('click', ".change", function() {
  $(".same").hide();

  switch ($(this).attr("id")) {
    case "b1":
      $("#abc").show();
      break;
    case "b2":
      $("#xyz").show();
      break;
  }
});

Answer 2

使用对象可以使它更简单。存储引用通过这种方式选择对象，可以避免切换情况。尽管使用show()和hide()方法来显示和隐藏元素。

// 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();
})

＆＃13;

$(document).on('click', ".change", function() {
  var sel = {
    b1: "#abc",
    b2: "#xyz"
  };
  $(".same").hide();
  $(sel[this.id]).show();
})

＆＃13;

.same {
  display: none;
  width: 400px;
  height: 200px;
  border: 1px solid;
}
#abc {
  display: block;
}
#xyz {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="abc" class="same">
    Hello
  </div>
  <div id="xyz" class="same">
    Bye
  </div>

  <button id="b1" class="change">b1</button>
  <br>
  <button id="b2" class="change">b2</button>
</body>

＆＃13;

Answer 3

你还没有提出正确的身份证明。另外我认为你忘了在你的代码中设置JQuery链接，这就是它给出引用错误的原因。

以下是更新后的代码：

$(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;
  }
})

.same{
  display: none;
  width: 400px;
  height: 200px;
  border: 1px solid;
}
#abc{
  display: block;
}
#xyz{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
  <div id="abc" class="same">
    Hello
  </div>
  <div id="xyz" class="same">
    Bye
  </div>
  
  <button id="b1" class="change">b1</button><br>
  <button id="b2" class="change">b2</button>
</body>

这是jsfiddle https://jsfiddle.net/r6nkuwvc/6/

Answer 4

如果您想控制从html显示/隐藏的内容，我建议采用这种方法：

＆＃13;

$('body').on('click', '[data-hide]', function(e) {
    $($(this).data('hide')).hide();
});
$('body').on('click', '[data-show]', function(e) {
    $($(this).data('show')).show();
});

＆＃13;

.same {
    display: none;
    width: 100%;
    height: 100px;
    border: 1px solid black;
}
#abc {
    display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc" class="same">
    Hello
</div>
<div id="xyz" class="same">
    Bye
</div>
<p>
    <button data-hide=".same" data-show="#abc">Show Hallo</button>
</p>
<p>
    <button data-hide=".same" data-show="#xyz">Show Bye</button>
</p>

＆＃13;

简单的开关盒不工作

4 个答案: