Question

我有一个包含不同类别的列表。所有列表项都是可点击的。我希望用户选择1到3个项目。他们可以切换他们的选择，但最多只有3个。到目前为止，非常好。

对我来说很棘手的是，我有一些不能与其他人合并的特殊类别。

当用户点击其中一个时，所有其他类别都会取消选择，并且无法添加任何其他类别（这些项目只能选择一个类别）

例：

让我们说“汽车”是一个特殊的类别。如果他们点击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 at http://jsfiddle.net/nfQum/9/

的工作jsFiddle

Answer 1

我添加了代码的这部分，它通过specialCat进行迭代并删除与之关联的类。您遇到的问题是您正在尝试删除a标记的类，而该类已应用于li而不是..

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

检查此UPDATED FIDDLE

如果您正在寻找，请告诉我。

Answer 2

http://jsfiddle.net/zD32M/4/（内部所有评论）

http://jsfiddle.net/RmqJ6/ - 对于Class来说有点困难：）

http://jsfiddle.net/RmqJ6/2/ - 如果你想在特殊猫之间切换，那就这样。

如果你需要你的元素id，只需要一个id数组。所以你有所有选定的值。

你去吧。对不起，总重写，更好的方法是为这个东西编写一个构造函数，所以你可以多次使用它。玩得开心。

顺便说一句rel很好，但更好地使用数据属性，特别是使用jQuery（如果你不仅需要一次，它会更快）。

检查先前单击的值是否在数组中

2 个答案: