Question

我想在.view-faq添加/删除课程。当有人点击.view-faq时，其父选择器.f-faq将添加类名.hidden（如果有，则删除类名.shown）。所有其他.f-faq将添加班级名称＆＃39; .shown＆＃39;（如果有，则删除班级名称.hidden。

<article class="panel">
    <div class="f-faq"><span>question 1</span>
        <span class="f-blurb"><br>
            Answer 1<a  href="#faq-1"><span class="view-faq">View answer</span></a>
        </span>
    </div>
</article>
<article class="panel">
    <div class="f-faq"><span>question 2</span>
        <span class="f-blurb"><br>
            Answer 2<a  href="#faq-2"><span class="view-faq">View answer</span></a>
        </span>
    </div>
</article>
<article class="panel">
    <div class="f-faq"><span>question 3</span>
        <span class="f-blurb"><br>
            Answer 3<a  href="#faq-3"><span class="view-faq">View answer</span></a>
        </span>
    </div>
</article>

我尝试过这个脚本，它没有用。

$('.view-faq').click(function(){
    var current = $(this).closest('.f-blurb');
    $(".f-blub").not($(current)).removeClass('hiden').addClass('shown');
    current.removeClass('shown').addClass('hiden');
})

我如何让它运作？欢呼声。

Answer 1

您忘记了点击事件中间行的结束“)”：

您的代码：

$('.view-faq').click(function(){
    var current = $(this).closest('.f-blurb');
    $(".f-blub").not($(current).removeClass('hiden').addClass('shown');
    current.removeClass('shown').addClass('hiden');
})

正确的代码应该是（因为current已经是jq对象）：

$('.view-faq').click(function(){
    var current = $(this).closest('.f-blurb');
    $(".f-blub").not(current).removeClass('hiden').addClass('shown');   <---------
    current.removeClass('shown').addClass('hiden');
})

Answer 2

你可以用这种方式重写它

$('.view-faq').click(function () {
    var current = $(this).closest('.f-blurb');
    current
        .removeClass('shown').addClass('hiden')
        .siblings().removeClass('hiden').addClass('shown');
});

通过这种方式，您无需从整个DOM中重新选择具有类f-blurb的元素，这可能会有点繁重的操作。

Answer 3

<强> Demo

您有以下问题;

缺少)
f-blub应为fblurb

您可以使用以下内容;

$('.view-faq').on("click", function(){
    var current = $(this).closest('.f-blurb');
    $(".f-blurb").removeClass("hiden").addClass('shown');
    current.removeClass('shown').addClass('hiden');
});

不能在里面变量。不在jquery中工作

3 个答案: