0

我有这个代码：

<div class="pvh_wrap">

<div class="pvh_item">
<div class="pvh_overlay"></div>
<div class="pvh_title">Lorem ipsum dolor sit amet</div><!-- end .pvh_title -->
<div class="pvh_button"><strong>Vote</strong></div><!-- end .pvh_button -->
</div><!-- end .pvh_item -->

<div class="pvh_item">
<div class="pvh_overlay"></div>
<div class="pvh_title">Lorem ipsum dolor sit amet</div><!-- end .pvh_title -->
<div class="pvh_button"><strong>Vote</strong></div><!-- end .pvh_button -->
</div><!-- end .pvh_item -->

<div class="pvh_item">
<div class="pvh_overlay"></div>
<div class="pvh_title">Lorem ipsum dolor sit amet</div><!-- end .pvh_title -->
<div class="pvh_button"><strong>Vote</strong></div><!-- end .pvh_button -->
</div><!-- end .pvh_item -->

<div class="pvh_item">
<div class="pvh_overlay"></div>
<div class="pvh_title">Lorem ipsum dolor sit amet</div><!-- end .pvh_title -->
<div class="pvh_button"><strong>Vote</strong></div><!-- end .pvh_button -->
</div><!-- end .pvh_item -->

<div class="pvh_item">
<div class="pvh_overlay"></div>
<div class="pvh_title">Lorem ipsum dolor sit amet</div><!-- end .pvh_title -->
<div class="pvh_button"><strong>Vote</strong></div><!-- end .pvh_button -->
</div><!-- end .pvh_item -->

</div><!-- end .pvh_wrap -->

我想要做的是当点击 pvh_button 时，除了当前 div 中的那个之外，会显示 pvh_overlay div。当前的 div 将是单击 pvh_button 的 pvh_item 类。到目前为止，我有这个，它通过将所有 pvh_overlay 设置为 display: inline 来打开它们，但我希望除当前一个之外的所有 pvh_overlay 都打开。我该怎么做？

<script>
$('.pvh_button').click(function(event) {
    $('.pvh_overlay').css('display', 'inline');     
});
</script>

谢谢。

4

2 回答 2

3 
$('.pvh_button').click(function(event) {
    var $currentContainerOverlay = $(this).parent().children('.pvh_overlay');
    $('.pvh_overlay').not($currentContainerOverlay).css('display', 'inline');     
});
于 2013-07-23T17:00:40.767 回答
0

兄弟姐妹（）方法可能需要较少的解析。如果您正在解析巨大的 HTML 结构，可能会更快。

$('.pvh_button').click(function(event) {
    $('.pvh_overlay').not($(this).siblings('.pvh_overlay')).css( {'display':'inline' });    
});
于 2013-07-23T17:15:08.523 回答