0

ボタンとして使用している多数の画像を含むjQueryモバイルページがあります。

ページが最初に読み込まれるとき、すべての画像のクラスは「非アクティブ」です。ボタンの 1 つをクリックすると、そのクラスが「アクティブ」に変更され、他のすべてのボタンが「非アクティブ」から「無効」に変更されます。ページから離れてまっすぐ戻ると、1 つの画像にはまだ「アクティブ」のクラスがあり、残りの画像にはまだ「無効」のクラスがあります。

アクティブなボタンをクリックすると、クラスが「アクティブ」から「非アクティブ」に変更され、他のすべてのボタンのクラスが「無効」から「非アクティブ」に変更されます。これにより、別のボタンを選択してアクティブにすることができます。

以前は無効だったが現在は非アクティブになっているボタンの 1 つをクリックすると、クリック イベントが発生しません。ページが最初にロードされたときと同じように、クラスがまだ無効になっていると考えているかのようです。Firefox で Firebug を使用して確認したところ、クラスは正しく非アクティブに設定されていますが、クラスが無効になっているかのように動作しています。

これが私のjQueryです：

$(document).ready(function() {

  $('.inactive, .active').on("click", function(){
    // Toggle active/inactive class
    $(this).toggleClass("active inactive");

    // Disable if 1 active button, else inactive
    if($('.active').length == 1) {
      $('.inactive').toggleClass("inactive disabled");
    } else {
      $('.disabled').toggleClass("disabled inactive");
    }
  });

});

そして HTML ボタン:

<a class="button inactive"></a><br />
<a class="button inactive"></a><br />
<a class="button inactive"></a><br />
<a class="button inactive"></a><br />
<a class="button inactive"></a><br />
<a class="button inactive"></a>

そしてクラス：

.button {
  background:url("../images/compare.png") no-repeat;
  width: 18px;
  height:18px
}
.active {
  background-position: 0 -18px;
  cursor:pointer
}
.inactive {
  background-position: 0 0;
  cursor:pointer
}
.disabled {
  background-position: 0 -36px;
  cursor:default
}
4

1 に答える 1

0

わかりました、私はこれを理解しました。

クラスを無効から非アクティブに変更すると、クリック ハンドラーが「新しい」非アクティブ ボタンに自動的にアタッチされません。

すべてのボタンに新しいクラス「mybutton」を追加し（たとえば、アクティブなボタンは class="mybutton active" になります）、クリックハンドラーでそのクラスを探して、無効になっているボタンでもコードを実行できるようにしました.

これが私の新しいコードです：

$(document).ready(function() {

  $('.mybutton').on("click", function(){
    if($(this).hasClass("inactive") || $(this).hasClass("active")) {
      $(this).toggleClass("active inactive");
    }

    // Disable if 1 active button, else inactive
    if($('.active').length == 1) {
      $('.inactive').toggleClass("inactive disabled");
    } else {
      $('.disabled').toggleClass("disabled inactive");
    }
  });

});

$(this).toggleClass("active inactive"); をラップする必要がありました。私を困惑させたifステートメントのステートメント。

if ステートメントがないと、無効なボタンをクリックすると、ボタンがアクティブになります。なぜこれが起こるのでしょうか？そして、トグルと同じクラスをチェックしているだけなのに、if ステートメントでボタンをラップすると、なぜそれが修正されるのでしょうか?

于 2012-10-22T07:14:59.857 に答える