僅顯示具有特定類別的同級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”