jQuery child> parent> child - PullRequest
Новая
       43

jQuery child> parent> child

3 голосов
/ 10 сентября 2011

У меня есть этот HTML-код: 

<div class="im">
<div style="height:220px">HELLO WORLD!
<a class="close">X</a>
<a class="open" style="display:none;">V</a>
</div>
</div>

<div class="im">
<div style="height:220px">HELLO WORLD!
<a class="close">X</a>
<a class="open" style="display:none;">V</a>
</div>
</div>

и я хочу нажать X (закрытие класса), чтобы изменить высоту родительского div на 20px и показать V (открытие класса), но скрыть X (закрытие класса) в каждом div с классом im отдельно. Затем нажмите V (открытый класс), чтобы изменить высоту родительского div на 220px и показать X, но скрыть V.

Итак, я написал этот код для этого, но когда я нажимаю X, он показывает ОБА V (открытый класс), но я хочу показать только один из них, который находится в div родительского элемента: 

$('.close').click(function(){ // click X makes
  $(this).parent().css('height','20px'); // parent div's height = 20px
  $(this).hide('fast'); //hide X
  $('.open').show('fast');} //unhide V
);
$('.open').click(function() {
  $(this).parent().css('height','220px');} // change height of parent div to 220px
  $(this).hide('fast'); //hide V
  $('.close').show('fast');} //unhide X
);

Как я могу скрыть и показать только один из V, который является дочерним по отношению к родительскому div, который является родительским по отношению к X (class .close).

Ответы [ 2 ]

2 голосов
/ 10 сентября 2011

Поскольку X и V являются братьями и сестрами, вы можете использовать метко названный метод siblings () : 

$(".close").click(function() {
    $(this).parent().css("height", "20px")
           .end().hide("fast")
           .siblings(".open").show("fast");
});

$(".open").click(function() {
    $(this).parent().css("height", "220px")
           .end().hide("fast")
           .siblings(".close").show("fast");
});
2 голосов
/ 10 сентября 2011

Вместо этого: 

// This code unhides ALL Vs because $('.open') selects ALL anchors with the class
$('.open').show('fast');} //unhide V

используйте это: 

// This code unhides only the V you want because it selects only one anchor:
// the one which is next to the clicked element $(this) in your HTML.
$(this).siblings('.open').show('fast');} //unhide V

То же самое изменение должно быть сделано в строке "unhide X".

...