如何检查特定类的最大元素数?

时间:2012-09-11 14:44:51

标签: jquery addclass toggleclass

我正在寻找做某事的最佳方式。我有一个不同类别的列表。所有列表项都是可点击的。我希望用户选择1到3个项目。

当他点击某些内容时,我在li上添加了一个选定的课程。当他再次点击同一项时,它会删除该类(ToggleClass())

我将整个事物包装在条件中,以计算所选类的项目数。这是我现在所处的小提琴:

http://jsfiddle.net/nfQum/1/

我的问题是,当你选择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");
     }
   }
}

5 个答案:

答案 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!')
        }
    }
}​

演示:http://jsfiddle.net/nfQum/2/

答案 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。

http://jsfiddle.net/nfQum/7/

$('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');
});

FIDDLE