0

我一直在努力寻找 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 });
});
4

3 回答 3

1

将 $(this) 更改为 $('#fullwrap')，因为您正在检查 id 为“fullwrap”的元素上的类。

于 2012-07-15T18:03:54.000 回答
1

这就是你需要的。说明：您的 $(this) 从来没有引用它应该的 $('#fullwrap') 。您的 $(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 });
});
于 2012-07-15T18:32:11.990 回答
0

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

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

如果其中一个类已经存在，您可以使用在两个类之间切换

 $(this).toggleClass('outside-office inside-office');
于 2012-07-15T17:56:25.020 回答