javascript - JQuery点击事件和toggleClass方法

Question

我创建了一个简单的彩票，并使用切换方法制作了选择器。这是我的代码。

  $( "span" ).click(function() {
  $( this ).toggleClass( "span-selected" );
});

切换功能工作正常，但我想添加一个限制，以便在一个容器中只能选择 7 个数字。有没有办法实现这一目标。这是我的 JSBIN > http://jsbin.com/menawu/1/edit?js,output

Answer 1

您需要检查该容器中是否已经检查了 7 个元素，如下所示:

$( "span" ).click(function() {
  if (
     $(this).hasClass("span-selected") || 
     (!$(this).hasClass(".span-selected") && $(this).closest(".num-cont").find(".span-selected").length < 7)
  ) {
       $( this ).toggleClass( "span-selected" );
   }
});

所以你的标准是:

• 如果没有选中，检查是否小于7:是则切换，否则什么都不做
• 如果选中，取消选中。