0

さまざまなカテゴリのリストがあります。リスト項目はすべてクリック可能です。ユーザーに 1 ～ 3 個のアイテムを選択してもらいたい。彼らは選択を切り替えることができますが、最大は常に 3 です。

私にとって難しいのは、他のカテゴリと組み合わせることができないいくつかの特別なカテゴリがあることです。

ユーザーがこれらのいずれかをクリックすると、他のすべてのカテゴリの選択が解除され、他のカテゴリを追加できなくなります (これらの項目には 1 つのカテゴリしか選択できません)。

例:

「車」が特別なカテゴリだとしましょう。Car をクリックすると、他のすべての選択が解除され、Car が選択され、他の何も選択できなくなります。ただし、Car をもう一度クリックして選択を解除すると、そこからロジックが最初からやり直されます。

私のコードに欠けているのは、このすぐ上の太字の部分です。

私のコード:

$j('.chooseCat li').on('click',function(){
   var $this = $j(this); //list item clicked
   var catId =  $this.children("a").attr("rel"); // list item id
   var specialCat = ['6','36','63']; 

   if ($this.hasClass("selected")) {
      $this.removeClass("selected");
      $j("#categorySuggestions p.error").hide("fast")
   } else {
      if( $j.inArray(catId, specialCat) !== -1  ) {
         $j('.chooseCat li').removeClass("selected");
         $this.addClass("selected");
      } else {
         if ($j('.chooseCat li.selected').length <= 2){
            $this.addClass("selected");
         } else {
             $j("#categorySuggestions p.error").show("fast").html("You cannot select any more categories");
         }
      }
   }
});

Iam の動作中の jsFiddle: http://jsfiddle.net/nfQum/9/

4

2 に答える 2

1

http://jsfiddle.net/zD32M/4/ (すべてのコメントが含まれています)

http://jsfiddle.net/RmqJ6/ - クラスで少し難しいこと:)

http://jsfiddle.net/RmqJ6/2/ - 特別な猫を切り替えたい場合はこれ。

要素の id`s が必要な場合は、ids 配列を取ります。これで、すべての値が選択されました。

どうぞ。完全な書き直しで申し訳ありませんが、より良い方法は、このことのコンストラクターを作成することです。これにより、複数回使用できます。楽しむ。

ところで、rel は便利ですが、特に jQuery ではデータ属性を使用することをお勧めします (1 回だけでなく必要な場合ははるかに高速です)。

于 2012-09-11T21:11:33.813 に答える
1

コードのこの部分を追加しました。これは、specialCat を反復処理し、に関連付けられているクラスを削除します。あなたが遭遇している問題は、クラスが代わりにliに適用されたので、タグのremoveClassを試みていることです..

if ($.inArray(catId, specialCat) > -1) {
            $.each(specialCat, function(i) {
                $('.chooseCat li').find('a[rel=' + specialCat[i]+ ']').parent().removeClass('selected');
            });
            $this.addClass("selected");
        }

この更新されたフィドルをチェックしてください

これがあなたが探しているものかどうか教えてください..

于 2012-09-11T20:48:02.320 に答える