0

私はjQueryの問題の解決策を見つけるために取り組んできました。2つのdivとそれぞれにリンクがある親コンテナがあります。いずれかのdivでリンクがクリックされると、クラスが親コンテナに追加されます（背景を変更するため）。他のリンクがクリックされた場合、他のリンクのクリックからクラスがすでに追加されて削除されているかどうかを確認したいと思いました。

何が起こっているのか：最初のリンクをクリックすると、クラスinside-officeが追加されます。次に、2番目のリンクをクリックすると、最初のリンクを削除せずに追加されます。

これが私がこれまで成功しなかったコードです：

$("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

ID「fullwrap」の要素のクラスをチェックしているので、$(this) を $('#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');

クラスの1つがすでに存在する場合は、を使用して2つのクラスを切り替えることができます。

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