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-属性），
• 缓存元素。