仅显示具体类的兄弟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

您已经在divtemp中存储了jQuery对象，因此$(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

另请注意，您引用<script type="text/javascript"> window.onload = function() { var frame = document.getElementById("frame1"); var win = frame.contentWindow; win.showMessage("Hello from Main Page in iFrame"); }; </script> 的早期代码仅指第一个对象而不是第二个对象＆＃39; divtemp＆＃39;