I have this code:
<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 -->
What I want to do is when the pvh_button is clicked, the pvh_overlay divs are shown except the one in the current div. The current div would be the pvh_item class that the pvh_button was clicked in. I have this so far which turns on all the pvh_overlay's by setting them to display: inline, but I want all except the current one to turn on. How would I do this?
<script>
$('.pvh_button').click(function(event) {
$('.pvh_overlay').css('display', 'inline');
});
</script>
Thanks.
$('.pvh_button').click(function(event) {
var $currentContainerOverlay = $(this).parent().children('.pvh_overlay');
$('.pvh_overlay').not($currentContainerOverlay).css('display', 'inline');
});
Probably less parsing needed with siblings() method. Could be faster if you are parsing huge HTML structure.
$('.pvh_button').click(function(event) {
$('.pvh_overlay').not($(this).siblings('.pvh_overlay')).css( {'display':'inline' });
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.