jquery - jqueryは要素のインスタンスを非表示にします

Question

クリックアクションでslideToggledされるdiv内の「.plus」要素と「.minus」要素のみを切り替えたい。

HTML

<div class="notification-box-heading">
    This is an Alert! 
    <span class="plus"><img src="http://www.cti-w.com/images/info.png"></span>
    <span class="minus"><img src="http://www.cti-w.com/images/close.png"></span>
</div>

<div class="notification-box-body"> 
    <strong>This is an alert!</strong>
    <p>This is the alert subtext.</p>
</div>

<div class="notification-box-heading">
    This is another Alert! 
    <span class="plus"><img src="http://www.cti-w.com/images/info.png"></span>
    <span class="minus"><img src="http://www.cti-w.com/images/close.png"></span>
</div>

<div class="notification-box-body"> 
    <strong>This is an alert!</strong>
    <p>This is the alert subtext.</p>
</div>

JS

$(document).ready(function () {
    //hide the all of the element with class notification-box-body
    $(".notification-box-body").hide();
    //hide the all of the element with class minus
    $(".minus").hide();
    //slides the element with class "notification-box-body" when paragraph with class "notification-box-heading" is clicked 
    $(".notification-box-heading").click(function () {
        $(this).next("div.notification-box-body").slideToggle(300);
        $(".minus").toggle();
        $(".plus").toggle();
    });
});

http://jsfiddle.net/tqD6S/2/

何か案は？

Answer 1

    $(".minus", this).toggle();
    $(".plus", this).toggle();

2番目のパラメーターは、スコープを定義します。

Answer 2

切り替えられる要素は、および要素を含む要素で.notification-box-bodyはありません。代わりに、container要素は実際にはクリックされている要素です。.minus.plus.notification-box-heading

試す：

$(".notification-box-heading").click(function () {
    $(this).next("div.notification-box-body").slideToggle(300);
    $(this).find(".minus,.plus").toggle();
});

jsFiddleデモを見る

Answer 3

$(document).ready(function () {
    //hide the all of the element with class notification-box-body
    $(".notification-box-body").hide();
    //hide the all of the element with class minus
    $(".minus").hide();
    //slides the element with class "notification-box-body" when paragraph with class "notification-box-heading" is clicked 
    $(".notification-box-heading").click(function () {
        $(this).next("div.notification-box-body").slideToggle(300);
        $(this).find(".minus").toggle();
        $(this).find(".plus").toggle();
    });
});

jsFiddle