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:如果是,则切换,否则不执行任何操作
• 如果已选中,请取消选中.