Bộ chọn jQuery không phải là con này

Question

Có cách nào để đính kèm một sự kiện nhấp chuột vào một số thành phần hay không và sau đó có tất cả các phần tử con, ngoại trừ con của THIS (cái được nhấp), để chạy một hàm?

Đó là một lời giải thích khủng khiếp, nhưng tôi đang tìm một cái gì đó như thế này:

$(".block_header").click(function(){ 
    $(".block_header span:not(this span)").toggleClass("collapse expand"); 
    $(".container:not(this+div.container)").slideToggle(); 
}); 

Dưới đây là một HTML mẫu:

<h3 id="sender_header" class="block_header"><span>Sender</span></h3> 
<div id="sender_container" class="container"> 
    <p>Show or hide this, based on which H3 is clicked.</p> 
</div> 
<h3 id="receiver_header" class="block_header"><span>Receiver</span></h3> 
<div id="receiver_container" class="container"> 
    <p>Show or hide this, based on which H3 is clicked.</p> 
</div> 
<h3 id="delivery_header" class="block_header"><span>Delivery</span></h3> 
<div id="delivery_container" class="container"> 
    <p>Show or hide this, based on which H3 is clicked.</p> 
</div> 
<h3 id="items_header" class="block_header"><span>Items</span></h3> 
<div id="items_container" class="container"> 
    <p>Show or hide this, based on which H3 is clicked.</p> 
</div> 
.... etc, etc (many more of the same) 

Hy vọng điều này không phải là quá phức tạp. Nó sẽ giúp tôi tiết kiệm rất nhiều mã.

Answer 1

Thay vì loại trừ phần tử trong bộ chọn, bạn có thể sử dụng hàm not(), chấp nhận phần tử DOM hoặc đối tượng jQuery để xóa khỏi tập hợp jQuery.

$(".block_header").click(function(e) { 
    $('.block_header span').not($(this).find('span')).toggleClass("collapse expand"); 

    $('.container').not($(this).next()).slideToggle(); 
}); 

Answer 2

$(".block_header").click(function(){ 
    $(".block_header span").not($('span', this)).toggleClass("active"); 
    $(".container").not($(this).next()).slideToggle(); 
}); 

Answer 3

Đừng nó như

$(".block_header").not(this).find("span").toggleClass("collapse","expand"); 

$(".container").not(this).not("div.container").slideToggle(); 

Answer 4

Hãy thử điều này:

$(this).parent('h3').siblings('h3').children('span').addClass('active'); 
$(this).parent('h3').siblings('h3').next('div.container').slideToggle('active'); 

Điều đó sẽ làm các trick!

Tuy nhiên, tôi có thể giả định rằng bạn sẽ chỉ có một hoạt động?

Nếu đúng như vậy, đây là đơn giản nhất:

$('.active').removeClass('active').parent('h3').next('div.container').slideUp(); 

Hy vọng rằng sẽ giúp :)

chỉnh sửa:

Để có thêm thông minh, lưu trữ một hoạt động như một biến. Vì vậy, trên nhấp chuột:

$active = $(this); 

Sau đó, lần sau bạn có thể làm điều này, mà không nhận được jQuery để đi tìm nguyên tố này một lần nữa:

$active.removeClass('active').parent('h3').next('div.container').slideUp(); 
$active = $(this);