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

我已经添加了这部分代码，它通过 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");
        }

检查这个更新的小提琴

让我知道这是否是你要找的..

于 2012-09-11T20:48:02.320 回答
1

http://jsfiddle.net/zD32M/4/（里面的所有评论）

http://jsfiddle.net/RmqJ6/ - Class 有点难:)

http://jsfiddle.net/RmqJ6/2/ - 如果你想在特殊猫之间切换的话。

如果您需要元素的 id ，只需使用 ids 数组。所以你有所有选择的值。

干得好。抱歉完全重写，更好的方法是为这个东西编写一个构造函数，这样你就可以多次使用它。玩得开心。

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

于 2012-09-11T21:11:33.813 回答