jQuery点击事件和toggleClass方法答案

【问题标题】：JQuery click event and toggleClass methodjQuery点击事件和toggleClass方法
【发布时间】：2016-11-24 14:34:44
【问题描述】：

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

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

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

【问题讨论】：

我上不了Jsbin，我想当你点击一个span时选择了一个数字？
@Alexis Hi alex 这里是codepen codepen.io/Karadjordje/pen/Pbjmxy

标签： javascript html jquery css arrays

【解决方案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：如果是，则切换，否则不做任何事情
如果它被选中，取消选中它。

【讨论】：

非常紧凑，但是您检查了hasClass 两次。这看起来应该是一个排他或，所以你可以检查$(this).hasClass("span-selected") != $(this).closest(".num-cont").find(".span-selected").length < 7

【解决方案2】：

您可以使用此代码；

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

【讨论】：

【解决方案3】：

是的，

您可以累积变量中选择的票数，并仅在计数小于 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++;
  }
});

【讨论】：

这将在全球范围内计算票证，而他需要为每个容器执行此操作。使用 length 属性更容易。

【解决方案4】：

这里是一个例子，有多个案例来控制你的数字。您可以通过使用hasClass/removeClass/addClass轻松知道它是取消选择/选择还是选择了超过 7 个跨度

$("span").click(function(){

  if($(this).hasClass("selected"))
  {
    $(this).removeClass("selected");
  }
  else{
    if($("span.selected").length<7)
    {
      $(this).addClass("selected");
    }
    else
      console.log("7 span selected");
  }
 
});

span{
  width:50px;
  height:50px;
  margin:10px;
  background-color:#eee;
  display:inline-table;
}

.selected{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>

【讨论】：

感谢您的解决方案。

【解决方案5】：

只需插入 count 和 max 变量

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

【讨论】：

好答案易于理解，但仅适用于一个容器。

【解决方案6】：

您可以使用父容器获取所选项目的数量并计算它们：

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

【讨论】：