我正在寻找做某事的最佳方式。我有一个不同类别的列表。所有列表项都是可点击的。我希望用户选择1到3个项目。
当他点击某些内容时,我在li上添加了一个选定的课程。当他再次点击同一项时,它会删除该类(ToggleClass())
我将整个事物包装在条件中,以计算所选类的项目数。这是我现在所处的小提琴:
我的问题是,当你选择3个项目时,你不能“取消选择一个”因为我的if语句阻止了它。这里有什么解决方案? (我也觉得这段代码真的不是最好的方法)
代码(与上面的Fidlle相同)
HTML
<ul>
<li class="chooseCategory16"><a onclick="test(16); return false;" href="#">test1</a></li>
...
</ul>
JS
function test(number) {
if ( $("li.selected").length <= 2) {
if( $("li.chooseCategory"+ number +"").hasClass("selected")) {
$("li.chooseCategory"+ number +"").removeClass("selected");
} else {
$("li.chooseCategory"+ number +"").addClass("selected");
}
}
}
答案 0 :(得分:2)
遵循以下原则:如果他们正确行事,让人们继续他们的任务(让ui脱离),并通过明确的信息拦截错误,以及如何解决问题,我会提出你正在使用的相同方法,但使用模态窗口通知用户何时选择了太多项目。
或者,如果您可以以用户肯定会看到的方式执行此操作,则可以在列表附近使用上下文相关消息。你不想让他们不知道这个问题。
function test(number) {
// always run this to allow removal of class when too many are selected
if ($("li.chooseCategory" + number + "").hasClass("selected")) {
$("li.chooseCategory" + number + "").removeClass("selected");
} else {
// move this condition inside the else
if ($("li.selected").length <= 2) {
$("li.chooseCategory" + number + "").addClass("selected");
} else {
// add notification of problem and how to solve
// a modal window, or context sensitive help here
alert('you can only select 3 - please deselct one!')
}
}
}
答案 1 :(得分:2)
首先:避免使用内联javascript是一种非常好的做法。 jQuery使得将事件绑定到元素非常容易,而不是在标记中使用javascript。我的示例演示了如何根据容器将事件绑定到这些项目。因为它使用委托事件 - 一个事件绑定到容器然后检查上下文 - 而不是将事件绑定到每个项目,它也提高了性能。
演示: http://jsfiddle.net/nate/nfQum/5/
$('.choose').on('click', 'li', function (event) {
// save a reference to the container ul
var $container = $(event.delegateTarget),
// save a reference to the li that was clicked
$element = $(event.currentTarget);
// if the li has the selected class...
if ($element.hasClass('selected')) {
// ...remove it!
$element.removeClass('selected');
} else {
// if it doesn't have the selected class, check whether
// the container has fewer than three children with the
// selected class
if ($container.children('.selected').length < 3) {
// if so, go ahead and add selected to this item
$element.addClass('selected')
}
}
});
答案 2 :(得分:1)
function test(number) {
if ($("li.selected").length <= 2)
{
if($("li.chooseCategory"+ number +"").hasClass("selected")) {
$("li.chooseCategory"+ number +"").removeClass("selected");
}else {
$("li.chooseCategory"+ number +"").addClass("selected");
}
} else {
if( $(event.target).parent().hasClass("selected") ) {
$(event.target).parent().removeClass("selected");
}
}
}
else部分将取消选择所选的li。 http://jsfiddle.net/uznbu/1/
答案 3 :(得分:1)
最好避免使用内联javascript,所以我已经使它更加jQuerified。
$('li.category').on('click',function(){
var $this = $(this); //store you jquery object - this referes to the element clicked
if ($this.hasClass("selected")) {
$this.removeClass("selected");
}else{
if ($('li.selected').length !== 3){
$this.addClass("selected");
}
}
});
答案 4 :(得分:0)
删除内联处理程序并执行:
$('ul li a').on('click', function(e) {
e.preventDefault();
$(this).parent('li')[$('li.selected').length>2?'removeClass':'toggleClass']('selected');
});