Показать только родственный div с конкретным классом

Question

Я сделал кодэп с примером.

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»