1

Pretty-checkboxes-plugin をいじっていて、問題があります。プラグインはここで見ることができますhttp://aaronweyenberg.com/90/pretty-checkboxes-with-jquery

ご覧のとおり、これは 2 つのリンクを使用して選択と選択解除を行います。1 つのリンクのみを使用し、クラスを変更して、次にクリックしたときに別の方法で機能するようにしたいと考えています。

それは十分に単純でなければなりません。私はそれをtoggleClassで動作させようとしています。

私は単純に toggleClass ステートメントを挿入したので、コードは次のようになります。

$(document).ready(function() {

/* see if anything is previously checked and reflect that in the view*/
$(".checklist input:checked").parent().addClass("selected");

/* handle the user selections */
$(".checklist .checkbox-select").click(
function(event) {
  event.preventDefault();
  $(this).parent().addClass("selected");
  $(this).parent().find(":checkbox").attr("checked","checked");
  $(this).toggleClass("checkbox-select checkbox-deselect");

 }

);

$(".checklist .checkbox-deselect").click(
 function(event) {
  event.preventDefault();
   $(this).parent().removeClass("selected");
   $(this).parent().find(":checkbox").removeAttr("checked");
   $(this).toggleClass("checkbox-select checkbox-deselect");
   }

   );

});

これはある程度機能します。クラスはうまく切り替えられますが、残りのコードは最初に実行されたときにのみ機能します。後続のすべてのクリックは、クラスとリンクを切り替えるだけで、他には何もありません。

これがなぜなのか誰にも分かりますか？

4

2 に答える 2

0

イベントハンドラーを設定した方法から、ハンドラーが「クラス」設定に基づいて動的に呼び出されることを想像していると思います。実際に得られるのは、「準備完了」ハンドラーが呼び出されたときのクラス設定に基づいてハンドラーを静的にバインドするものです。 クラス割り当ての変更は、それらのハンドラーが呼び出される方法には何の影響もありません。

その設定の代わりに、いくつかの方法があります。まず、単一のイベントハンドラーをバインドしてから、単純な「hasClass（）」テストを使用して、そのハンドラー内の現在のクラスを確認できます。それはかなり簡単でしょう。

もう1つのアプローチは、「デリゲート」または「ライブ」メカニズムを使用することです。これは、現在のコードが望んでいるように見える動的な解釈動作を実際に備えています。

于 2010-04-22T14:29:49.980 に答える
0 
$(this).toggleClass("checkbox-select checkbox-deselect");

要素のクラスを変更するだけでは、登録されているイベント リスナーは変更されません。準備完了時に一致する要素を選択するためのハンドラーを登録しましたが、要素が からに$(".checklist .checkbox-select")変更された後も、選択解除ハンドラーではなく、そのハンドラーがまだ残っています。.checkbox-selectcheckbox-deselect

本当にイベント時バインディングが必要な場合はlive()、単純なバインディングの代わりに関数が必要click()です。ただし、おそらく単一の関数を使用したほうがよいと思います。

$('#checktoggler').click(function() {
    // select all, unless all are already selected, in which case select none
    var selected= $('.checklist input:checked').length!==0;
    selected= !selected;

    $(this).parent().toggleClass('selected', selected);
    $(this).parent().find(":checkbox").attr('checked', selected);
    $(this).toggleClass('checkbox-select checkbox-deselect', selected);
});
于 2010-04-22T14:32:28.630 に答える