Javascript JQuery单击事件和切换类方法

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

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

切换功能工作正常，但我想添加一个限制，以便在一个容器中只能选择7个数字。有没有办法做到这一点。 这是我的JSBIN>

你可以使用这段代码

$( "span" ).click(function() {
  if($(this).parent().parent().find('.span-selected').length===7){
    alert('Limit');
  }
  else{
    $( this ).toggleClass( "span-selected" );
  }
});

---

您需要检查该容器中是否已经检查了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" );
   }
});

$（“span”）。单击（函数（）{
如果(
$（this）.hasClass（“选定范围”）||
（！$（this.hasClass（“.span选定”）&&$（this.nexist（“.num cont”）.find（“.span选定”）.length<7）
) {
$（此）.toggleClass（“选定范围”）；
}
});

因此，你的标准是：

• 如果未选中，则检查是否小于7：如果是，则切换，否则不执行任何操作
• 如果选择了它，请取消选择它
  是
  您可以累积在变量中选择的票证计数，并且仅当计数小于7时才允许切换，这基于jQuery hasClass方法来检查您的跨度是否以前被选中：

  var countTicket = 0;
  $( "span" ).click(function() {
    if($(this).hasClass( "span-selected")) {
      countTicket--;
      $( this ).toggleClass( "span-selected" );   
    } else if(countTicket<7) {
      $( this ).toggleClass( "span-selected" );
      countTicket++;
    }
  });
  

  var countTicket=0；
  $（“span”）。单击（函数（）{
  if（$（this）.hasClass（“选定范围”））{
  倒计时票--；
  $（此）.toggleClass（“选定范围”）；
  }else if（countTicket您可以使用父容器获取所选项目的数量并对其进行计数：
  
  $( "span" ).click(function() {
            if($(this).closest('.num-cont').find('.span-selected').length==7){
              alert('Limit');
            }
            else{
              $( this ).toggleClass( "span-selected" );
            }
          });
  
  这里有一个例子，用多个案例来控制你的数字。
  通过使用
  hasglass/removeClass/addClass
  
  
  $（“span”）。单击（函数（）{
  if（$（this）.hasClass（“选定”））
  {
  $（此）.removeClass（“选定”）；
  }
  否则{
  如果（$（“span.selected”）.length只需插入count和max变量即可
  
  var max = 7;
  var count = 0;
  $("span").click(function() {
      if (count < max) {
          $(this).toggleClass("span-selected");
          count++;
      }
  });
  
  var max=7；
  var计数=0；
  $（“span”）。单击（函数（）{
  如果（计数<最大值）{
  $（此）.toggleClass（“选定范围”）；
  计数++；
  }
  });
  我不能使用Jsbin，我想当你点击一个span时，如果选择了一个数字？@Alexis Hi alex这里是codepen这将全局计算票数，而他需要为每个容器计算票数。使用长度属性更容易。非常紧凑，但你要检查两次
  hasClass
  。这看起来应该是一个排他性的或者，您可以只检查
  $（this）.hasClass（“span selected”）！=$（this）.closest（.num cont”）.find（.span selected”）。长度<7
  很好的答案很容易理解，但只适用于一个容器。感谢您提供此解决方案。