Question

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

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

现在切换工作正常，但我想限制，以便在一个容器中只能选择7个数字。有没有办法实现这一目标。这是我的JSBIN＆gt; 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：如果是，则切换，否则不执行任何操作
如果已选中，请取消选中。

Answer 2

您可以使用此代码;

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

Answer 3

是，

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

Answer 4

这是一个例子，有多个案例可以控制你的数字。您可以使用hasClass/removeClass/addClass

轻松了解是否取消选择/选择或是否选择了超过7个范围

＆＃13;

$("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");
  }
 
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

只需插入计数和最大变量

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

Answer 6

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

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

JQuery单击事件和toggleClass方法

6 个答案: