仅显示具有特定类的兄弟 div

Question

我用一个例子做了一个codepen。

http://codepen.io/anon/pen/vNgvwV

当您单击按钮并且它变为“绿色”时 - 选中，应该显示同级“time_container”。

$(".button_cell").click(function() {
  var self = this, // Cache
    div1 = $('.check_button', self), // Cache
    div2 = $('.checked_button', self), // Cache
    div3 = $('.red_check', self), // Cache
    divtemp = $('.time_container', self); // Cache

  if (div1.is(':visible')) {
    div1.hide();
    $(div2, divtemp).show();
  } else if (div2.is(':visible')) { // Use else if
    div3.show();
    $(div2, divtemp).hide();
  } else if (div3.is(':visible')) { // Use else if
    div3.hide();
    div1.show(); // Use multiple selectors
  }
});

body {
  background: #fafafa;
  height: 100vh;
  width: 100vw;
  color: #282828;
  margin: 0;
}
.button_cell {
  cursor: pointer;
  display: block;
  height: 100px;
  width: 100px;
  -webkit-user-select: none;
  /* Chrome/Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */
  margin: 10px;
}
.check_button {
  height: 100px;
  width: 100px;
  display: block;
  background: gray;
}
.checked_button {
  height: 100px;
  width: 100px;
  display: none;
  background: green;
}
.red_check {
  height: 100px;
  width: 100px;
  display: none;
  background: red;
}
.time_container {
  display: none;
  height: 100px;
  width: 100px;
  background: blue;
  color: white;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="button_cell">
    <div class="check_button">Empty</div>
    <div class="checked_button">Checked</div>
    <div class="red_check">Red Checked</div>
  </div>
  <div class="time_container">Time Container</div>
</div>

<div class="row">
  <div class="time_container">This one should not be shown</div>

我无法让它工作。 有什么想法吗？

Answer 1

您已经将 jQuery 对象存储在 divtemp 中，因此 $(div2, divtemp) 将不起作用，因为 div2 ,divtemp 不是有效的选择器，它们是对象。

$(".button_cell").click(function() {
  var self = this, // Cache
    div1 = $('.check_button', self), // Cache
    div2 = $('.checked_button', self), // Cache
    div3 = $('.red_check', self), // Cache
    divtemp = $('.time_container'); // Cache

  if (div1.is(':visible')) {
    div1.hide();
   div2.show();divtemp.show();
  } else if (div2.is(':visible')) { // Use else if
    div3.show();
    $(div2, divtemp).hide();
  } else if (div3.is(':visible')) { // Use else if
    div3.hide();
    div1.show(); // Use multiple selectors
  }
});

body {
  background: #fafafa;
  height: 100vh;
  width: 100vw;
  color: #282828;
  margin: 0;
}
.button_cell {
  cursor: pointer;
  display: block;
  height: 100px;
  width: 100px;
  -webkit-user-select: none;
  /* Chrome/Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */
  margin: 10px;
}
.check_button {
  height: 100px;
  width: 100px;
  display: block;
  background: gray;
}
.checked_button {
  height: 100px;
  width: 100px;
  display: none;
  background: green;
}
.red_check {
  height: 100px;
  width: 100px;
  display: none;
  background: red;
}
.time_container {
  display: none;
  height: 100px;
  width: 100px;
  background: blue;
  color: white;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="button_cell">
    <div class="check_button">Empty</div>
    <div class="checked_button">Checked</div>
    <div class="red_check">Red Checked</div>
  </div>
  <div class="time_container">Time Container</div>
</div>

<div class="row">
  <div class="time_container">This one should not be shown</div>

Answer 2

请通过更新后的 codepen 链接 - CodePen

还请注意，您之前引用 $(div2, divtemp).show(); 的代码仅引用第一个对象而不是第二个对象“divtemp”