JQuery点击事件和toggleClass方法

Question

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

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

切换功能运行正常，但我想添加一个限制，使得一个容器中只能选择7个数字。有什么方法可以实现这一点。 这是我的JSBIN > http://jsbin.com/menawu/1/edit?js,output

- Karadjordje

---

我无法进入Jsbin，我想象当您点击一个SPAN时选择一个数字吗？ - Alexis

@Alexis 嗨，Alex，这是CodePen链接 https://codepen.io/Karadjordje/pen/Pbjmxy - Karadjordje

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个：如果是，则切换，否则不做任何操作
• 如果它被选中，取消选择。

- Victoria Ruiz

---

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

Answer 2

以下是一个例子，可以用多种方式控制您的数字。 通过使用 hasClass/removeClass/addClass，您可以轻松知道它是否未选择/选择或者是否选择了超过7个span。

$("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>

- Alexis

---

感谢您提供的解决方案。 - Karadjordje

Answer 3

你可以使用这段代码：

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

- pridemkA

Answer 4

是的，你可以将选定的票数累加到一个变量中，并只有当计数小于7时才允许切换，基于jQuery hasClass方法来检查你的span是否先前被选中：

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++;
  }
});

- arielten

---

这将全局计算票数，而他需要为每个容器进行计算。使用length属性更容易。 - Victoria Ruiz

Answer 5

只需插入计数和最大变量

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

- Milan Zdravkovic

---

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

Answer 6

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

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

- Amr Elgarhy