JQuery單擊事件和toggleClass方法

所以，我創建了一個簡單的彩票，我用切換方法制作了選擇器。這是我的代碼。JQuery單擊事件和toggleClass方法

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

現在切換工作正常，但我想限制，以便只能在一個容器中選擇7個數字。有沒有辦法做到這一點。這是我的JSBIN>http://jsbin.com/menawu/1/edit?js,output

來源

2016-11-24 Karadjordje

我不能繼續Jsbin，我想象當你點擊一個跨度時選擇了一個數字？ – Alexis

@Alexis 嗨alex這裏是codepen https://codepen.io/Karadjordje/pen/Pbjmxy – Karadjordje

您需要檢查是否已經有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個：如果是的話，切換，否則不要做任何事情
如果它被選中，取消選擇它。

來源

2016-11-24 14:42:06

謝謝維多利亞它完美的工作 – Karadjordje

非常緊湊，但你正在檢查'hasClass'兩次。這看起來應該是一個獨佔或，所以你可以檢查'$（this）.hasClass（「span-selected」）！= $（this）.closest（「。num-cont」）。find（「。 span-selected「）。length <7' – patrick96

您可以使用此代碼;

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

來源

2016-11-24 14:41:51 pridemkA

這也很好，謝謝 – Karadjordje

是，

可以累積在變量選擇門票的數量，如果先前選擇的範圍，只允許切換時計數小於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++; 
    } 
});

來源

2016-11-24 14:43:05 arielten

這將對全球票數進行計數，而他需要對每個貨櫃進行計數。使用長度屬性更容易。 –

您可以使用父容器獲得所選項目的數量和盡數：

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

來源

2016-11-24 14:46:42

^h舉一個例子，用多個案例來控制你的數字。您可以輕鬆地知道它是否取消選擇/選擇，或者如果超過7跨度使用hasClass/removeClass/addClass

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

來源

2016-11-24 14:48:26 Alexis

感謝您使用此解決方案。 – Karadjordje

只需插入數和最大變量選擇

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

來源

2016-11-24 14:51:32

好的答案容易理解，但只適用於一個容器。 – Karadjordje

JQuery單擊事件和toggleClass方法

回答

相關問題