jQuery list exclusivity function

Question

所以我試圖設置一個函數來偵聽IF和ONLY如果3個特殊項目被「檢查」。

到目前爲止，我有一個包含9個項目的列表，當3個「S」（特殊）具有點擊的類時，背景將變爲藍色，然後如果其中任何一個未點擊。

我想知道的是如果有一種方法可以滿足條件（藍色背景）如果和僅當如果選中了三個「S」並且沒有其他選項被檢查。

演示，請參閱：http://jsfiddle.net/stursby/V5Hee/

任何幫助將是巨大的，

感謝。

Answer 1

是的，添加一個條件，確保只有3點擊，然後檢查他們是你想要的。

$('#grid li.clicked').size() == 3 

http://jsfiddle.net/V5Hee/2/

UPDATE

使用.length而不是.size()如指出更好pracitce：

$('#grid li.clicked').length == 3 

http://jsfiddle.net/V5Hee/3/

Answer 2

我解決了問題，在您的jsfiddle這個HTML：

<ul id="grid"> 
    <li id="a1" class="r">R</li> 
    <li id="a2" class="s">S</li> 
    <li id="a3" class="r">R</li> 
    <li id="a4" class="r">R</li> 
    <li id="a5" class="s">S</li> 
    <li id="a6" class="s">S</li> 
    <li id="a7" class="r">R</li> 
    <li id="a8" class="r">R</li> 
    <li id="a9" class="r">R</li> 
</ul> 

而且，此javascript：

$("#grid li").click(function() { 
    $(this).toggleClass("clicked"); 
}); 

$(window).click(function() { 
    var color = "#fff"; 
    if ($("#grid li.s.clicked").length == 3 && $("#grid li.r.clicked").length == 0) { 
     color = "blue"; 
    } 
    $('body').css('background', color); 
}); 

你可以看到它在這裏工作：http://jsfiddle.net/jfriend00/8W6K2/。

改變我做：

1. 讓所有的ID值是合法的（不能以數字開頭）
2. 添加一類獨特的特殊和非特殊李標籤，因此很容易使用jQuery選擇器來找到他們
3. 更改您點擊切換使用toggleClass方法，不正是你想要
4. 使用一個選擇，看看它的長度，看看有多少特殊項目有點擊類的東西。
5. 添加邏輯，以確保沒有 「R」 的項目進行檢查

Answer 3

試試這個：

$(window).click(function() { 
    var good = true; 
    $('#grid li').each(function() { 
    if ($(this).html()=='S' && !$(this).hasClass('clicked') || 
     $(this).html()=='R' && $(this).hasClass('clicked')) { 
     good = false; 
    } 
    }); 
    if (good) { 
    $('body').css('background', 'blue'); 
    } 
    else { 
    $('body').css('background', '#fff'); 
    } 
}); 

Answer 4

下面是使用JS對象的另一種方法。你不需要窗口監聽器。你可以只使用#grid li上的監聽器。

<ul id="grid"> 
    <li id="1">R</li> 
    <li id="2" class="s_type">S</li> 
    <li id="3">R</li> 
    <li id="4">R</li> 
    <li id="5" class="s_type">S</li> 
    <li id="6" class="s_type">S</li> 
    <li id="7">R</li> 
    <li id="8">R</li> 
    <li id="9">R</li> 
</ul> 

$("li").click(function() { 
    if ($(this).is(".clicked")) { 
     $(this).removeClass("clicked"); 
    } else { 
     $(this).addClass("clicked"); 
    } 

    clicks.checkClicks(); 
}); 

var clicks = { 
    checked: 0, 
    total: 0, 
    checkClicks: function(){ 
     clicks.checked = 0; 
     clicks.total = 0; 
     $('#grid li').each(function(){ 
      if($(this).hasClass('clicked') && $(this).hasClass('s_type')) 
      { 
       clicks.checked += 1; 
       clicks.total += 1; 
      } 
      else if($(this).hasClass('clicked')) 
      { 
       clicks.total += 1; 
      } 
     }); 

     if(clicks.checked == 3 && clicks.total == 3) 
     { 
      $('body').css('background', 'blue'); 
     } 
     else 
     { 
      $('body').css('background', '#fff'); 
     } 
    } 
}; 

Answer 5

我的解決方案非常接近jfriend00的解決方案。但是我的解決方案涉及data-屬性（見this jsfiddle的證明）：

HTML：

<ul id="grid"> 
    <li data-content="R">R</li> 
    <li data-content="S">S</li> 
    <li data-content="R">R</li> 
    <li data-content="R">R</li> 
    <li data-content="S">S</li> 
    <li data-content="S">S</li> 
    <li data-content="R">R</li> 
    <li data-content="R">R</li> 
    <li data-content="R">R</li> 
</ul> 

的JavaScript：

var $grid = jQuery('#grid'); 
$grid.find('li[data-content]').click(function(){ 
    jQuery(this).toggleClass('clicked'); 
    if ($grid.find('li[data-content="S"].clicked').length==3 && 
     $grid.find('li[data-content!="S"].clicked').length==0){ 
     jQuery('body').css({'background-color': 'blue'}); 
    }else{ 
     jQuery('body').css({'background-color': 'transparent'}); 
    }; 
}); 

因此，基本上：

• 記得length財產告訴你有關數組或jQuery對象中元素的數量ct，
• 你應該以一種可以在選擇器中檢查的方式（例如，存儲）來存儲關於哪些元素是「S」（「特殊」）元素的信息。添加它們的特殊類或data-屬性），
• 緩存元素。