4

私はこのフォーラムに不慣れで、jQuery にもかなり慣れていないので、(私が思うに) 基本的な質問ですが、答えを見つけることができず、私が試したすべてがうまくいきませんでした。

特定のことを行い、クラスを変更する必要があるページにボタンがあります。そして、新しいクラスでそれらを元に戻します。

これはコードです：

    $("#info_button.buttonOff").click(function() {
    $(".content").slideUp(300, function() {
        $("#info").slideDown(300);
        $("#info").addClass("contentOn");
        $("#info_button").removeClass("buttonOff").addClass("buttonOn");
        $("#overlay").fadeIn(300);
    });
});

$("#info_button.buttonOn").click(function() {
    $(".content").slideUp(300);
    $("#info").removeClass("contentOn");
    $("#info_button").removeClass("buttonOn").addClass("buttonOff");
    $("#overlay").fadeOut(300);
});

初のイベント単独作品。しかし、2 番目のイベントを追加するとすぐに、何も機能しなくなります。.unbind() で何かをしなければならないと思いますが、その方法がわかりませんでした。

助けてください。

4

4 に答える 4

4

問題は、jQueryコレクションが1回だけ計算されることです。

使用する

$(document).on('click', "#info_button.buttonOff", function() {

と

$(document).on('click', "#info_button.buttonOn", function() {

これにより、クリックが発生するたびにセレクターがテストされます。

要素にはIDがあるため、より軽量なソリューションは次のようになります。

$("#info_button").click(function() {
    if ($(this).hasClass('buttonOn')) {
       // do something
    } else {
       ...

しかし、私は一般的に最初のものを好みます。

于 2012-10-29T14:00:29.807 に答える
0

使用する ：

$(document).on('click', "#info_button", function() {
    $(".content").slideUp(300, function() {
        if ($("#info").is(':visible'))
            $("#info").slideUp(300);
        else
            $("#info").slideDown(300);
        $("#info").toggleClass("contentOn");
        this.toggleClass("buttonOn").toggleClass("buttonOff");
        if ($("#overlay").is(':visible'))
            $("#overlay").fadeOut(300);
        else
            $("#overlay").fadeIn(300);
    });
});
于 2012-10-29T14:04:44.937 に答える
0

最も簡単な解決策は、ボタンのクリック ハンドラー内でクラスをテストすることです。

$("#info_button").click(function() {
  if ($(this).hasClass('buttonOff')) {
    // ...
  } else if ($(this).hasClass('buttonOn')) {
    // ...
  }
});
于 2012-10-29T14:03:57.507 に答える
-1

おそらく、両方のバインディング イベントが同じ要素を参照しているため、これらの関数が互いに干渉している可能性があります。

次のようなことを試してみてください。

$("#info_button").click(function() {
if($(this).hasClass('buttonOff') {
    $(".content").slideUp(300, function() {
        $("#info").slideDown(300);
        $("#info").addClass("contentOn");
        $("#info_button").removeClass("buttonOff").addClass("buttonOn");
        $("#overlay").fadeIn(300);
    });
} else if($(this).hasClass('buttonOn') {
$(".content").slideUp(300);
    $("#info").removeClass("contentOn");
    $("#info_button").removeClass("buttonOn").addClass("buttonOff");
    $("#overlay").fadeOut(300);
    });
}
});
于 2012-10-29T14:04:48.123 に答える