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

Question

我正在寻找做某事的最佳方式。我有一个不同类别的列表。所有列表项都是可点击的。我希望用户选择 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");
     }
   }
}

​

Answer 1

遵循这样的原则，如果他们做得对，你就可以让人们继续他们的任务（让用户界面不碍事），并拦截错误并清楚地说明问题是什么以及如何解决它，我会提出与您使用的方法相同的方法，但使用模式窗口在用户选择过多项目时通知用户。

或者，您可以在列表附近使用上下文相关消息，前提是您可以以用户肯定会看到的方式执行此操作。你不想让他们不知道这个问题。

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/

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

Answer 3

最好避免使用内联 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");
        }
    }
});

Answer 4

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/

Answer 5

删除内联处理程序并执行：

$('ul li a').on('click', function(e) {
    e.preventDefault();
    $(this).parent('li')[$('li.selected').length>2?'removeClass':'toggleClass']('selected');
});

​ FIDDLE