Question

我有一堆div，我将在点击时切换。但是，我不希望有一堆不同的jquery函数来完成同样的事情。问题是我的当前函数将切换所有div而不是仅选择一个div。任何只有在没有一堆jquery函数的情况下才能切换的解决方案？

HTML：

<div class="help-spacer">
    <div class="help-info">
    <a href="" class="help-info-link"><i class="fa fa-plus-circle"></i> Hello</a>
    </div>
    <div class="help-info-text" hidden>
        Hello Hello Hello
    </div>
</div>
<div class="help-spacer">
    <div class="help-info">
    <a href="" class="help-info-link"><i class="fa fa-plus-circle"></i> Hello</a>
    </div>
    <div class="help-info-text" hidden>
        Hello Hello Hello
    </div>
</div>

CSS：

.help-info {
    background: #f1f1f1;
    width: 650px;
    margin: 0 auto;
    padding: 15px 20px;
    font-family: 'Open Sans', serif;
}
.help-info-open {
    background: #1795db;
    width: 650px;
    margin: 0 auto;
    padding: 15px 20px;
    font-family: 'Open Sans', serif;
}
.help-info-link {
    color: #5c5c5c;
}
.help-info-link-open {
    color: #ffffff;
}
.help-info-text {
    background: #fff;
    font-family: 'Open Sans', serif;
    color: #5c5c5c;
    width: 650px;
    margin: 0 auto;
    padding: 15px 20px;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    -o-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
}

JQUERY：

$(".help-info-link").click(function(event){
    event.preventDefault();
    $('.help-info').toggleClass('help-info-open');
    $('.help-info-link').toggleClass('help-info-link-open');
    $('.help-info-text').toggle();
});

Answer 1

在事件处理程序中， this 引用单击的元素。所以你可以这样做：

$(".help-info-link").click(function(event){
    event.preventDefault();
    $(this).closest('.help-info').toggleClass('help-info-open');
    $(this).toggleClass('help-info-link-open');
    $(this).closest('.help-info').next('.help-info-text').toggle();
});

见这里：http://jsfiddle.net/4q6b0gn4/

Answer 2

而不是最接近你可以使用直接父函数，以及像我在这里完成的下一个函数： http://jsfiddle.net/uq6xcdo5/1/

$(".help-info-link").click(function(event){
    event.preventDefault();
    $(this).parent().toggleClass('help-info-open');
    $(this).toggleClass('help-info-link-open');
    $(this).parent().next(".help-info-text").toggle();
});

jquery切换所有div而不是一个

2 个答案: