我有一个不同类别的列表。所有列表项都是可点击的。我希望用户选择 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/