javascript - 仅切换类的一个实例

Question

我不太确定我需要什么，所以以下解释可能不清楚 - 如果不清楚，请告诉我。

我想要slideToggle一个特定的点击div，我当前拥有的代码当然是slideToggle的所有具有.open-statement类的div实例，但是我只想切换出现在父 div .agenda-content 内的此类的一个实例。最终页面上将会出现大量 .open-statement 实例，但只有其中一个应该切换(当前单击的 div 内的实例)。

HTML

        <div class="agenda-content">
            <div class="row stance-row">
                <div class="col-xs-3 no_padding">
                    1
                </div>
                <div class="col-xs-2">
                    Obamacare
                    <button class="btn btn-orange">Remove Stance</button>
                </div>
                <div class="col-xs-2">
                    Add jQuery UI here
                </div>
                <div class="col-xs-2">
                    34
                </div>
                <div class="col-xs-2 no_padding">
                    Wayne Rooney
                </div>
            </div>
            <div class="row no-row-style">
                <div class="open-statement">
                    <div class="col-xs-4 col-xs-offset-1">
                        <div class="your-statement">
                            <textarea placeholder="Please write your statement"></textarea>
                            <button class="btn btn-orange">Edit</button>
                        </div>
                    </div>
                    <div class="col-xs-7 no_padding">
                        <div class="statement-actions">
                            <button class="btn btn-alert">Deactivate</button>
                            <button class="btn btn-lt-secondary">View Debates</button>
                            <button class="btn btn-orange">Unsupport</button>   
                        </div>
                    </div>
                </div>
            </div>
            <div class="row stance-row">
                <div class="col-xs-3 no_padding">
                    2
                </div>
                <div class="col-xs-2">
                    Raise Minimum Wage
                    <button class="btn btn-orange">Take a Stance</button>
                </div>
                <div class="col-xs-2">
                    Add jQuery UI here
                </div>
                <div class="col-xs-2">
                    34
                </div>
                <div class="col-xs-2 no_padding">
                    Stephen King
                </div>
            </div>
            <div class="row no-row-style">
                <div class="open-statement">
                    <div class="col-xs-4 col-xs-offset-1">
                        <div class="your-statement">
                            <textarea placeholder="Please write your statement"></textarea>
                            <button class="btn btn-orange">Edit</button>
                        </div>
                    </div>
                    <div class="col-xs-7 no_padding">
                        <div class="statement-actions">
                            <button class="btn btn-alert">Deactivate</button>
                            <button class="btn btn-lt-secondary">View Debates</button>
                            <button class="btn btn-orange">Unsupport</button>   
                        </div>
                    </div>
                </div>
            </div>
        </div>

jQuery

$(document).ready(function () {
$(".stance-row").click(function () {
    $(".agenda-content").find(".open-statement").slideToggle();
});
});

Answer 1

.agenda-content 是所有 .open-statement 的父级。你需要更具体。使用 .next 和 .find() :

$(document).ready(function () {
    $(".stance-row").click(function () {
        $(this).next().find(".open-statement").slideToggle();
    });
});