Question

我一直在努力寻找jQuery问题的解决方案。我有一个父容器，每个容器有2个div和一个链接。如果在其中一个div中单击了一个链接，则会将一个类添加到父容器中（以更改背景）。如果点击了其他链接，我想检查是否已经从其他链接的点击中添加了一个类并将其删除。

发生了什么：当我点击第一个链接时，会添加课程inside-office。然后我单击第二个链接，它将添加该链接而不删除第一个链接。

这是我到目前为止的代码没有成功：

$("a.in-office").click(function() {
    if($('#fullwrap').hasClass('outside-office')) {
    $(this).removeClass('outside-office');
    }
    $('#top_barwrap').parent().addClass('inside-office');
    $('.blockcase').fadeIn();
    $('.lead-title, .subtitle').fadeOut();
    $('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});

$("a.out-office").click(function() {
    if($('#fullwrap').hasClass('inside-office')) {
    $(this).removeClass('inside-office');
    }
    $('#top_barwrap').parent().addClass('outside-office');
    $('.blockcase').fadeIn();
    $('.lead-title, .subtitle').fadeOut();
    $('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});

Answer 1

将$（this）更改为$（＆＃39;＃fullwrap＆＃39;），因为您正在检查id为＃34; fullwrap＆＃34;的元素上的类。

Answer 2

这就是你需要的。说明：你的$（this）永远不会引用它应该的$（'#woldwrap'）。你的$（this）实际上是指$（'a.in-office'）或$（'a.out-office'）。

正确代码：

$("a.in-office").click(function() {
    var $this = $('#fullwrap');
    if($this.hasClass('outside-office')) {
        $this.removeClass('outside-office');
    }
    $('#top_barwrap').parent().addClass('inside-office');
    $('.blockcase').fadeIn();
    $('.lead-title, .subtitle').fadeOut();
    $('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});

$("a.out-office").click(function() {
    var $this = $('#fullwrap');
    if($this.hasClass('inside-office')) {
        $this.removeClass('inside-office');
    }
    $('#top_barwrap').parent().addClass('outside-office');
    $('.blockcase').fadeIn();
    $('.lead-title, .subtitle').fadeOut();
    $('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});

Answer 3

使用toggleClass。如果它存在，它将删除该类，否则添加它。

$(this).toggleClass('outside-office');

如果其中一个类已存在，则可以使用

在两个类之间切换

 $(this).toggleClass('outside-office inside-office');

如果单击其他链接，则从ID中删除Class，反之亦然

3 个答案: