jQuery列表排他性函数

Question

所以我试图建立一个函数，监听当且仅当3个特殊项目被"选中"。

到目前为止，我有一个包含9个项目的列表，当3个"S"(用于特殊)被点击类时，背景将变为蓝色，然后如果3个中的任何一个被取消单击，背景将变回蓝色。

我想知道的是，如果有一种方法，使它满足条件(蓝色背景)当且仅当三个"S"被选中，没有其他检查

看这里的演示:http://jsfiddle.net/stursby/V5Hee/

任何帮助都将是伟大的，

谢谢。

Answer 1

我用这个HTML解决了jsFiddle中的问题:

<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. 为特殊和非特殊的li标签添加一个唯一的类，这样可以很容易地使用jQuery选择器找到它们
3. 改变你的点击切换，使用toggleClass方法，这正是你想要的
4. 使用选择器并查看它的长度，以查看有多少特殊项目被点击类。
5. 添加逻辑以确保没有"r"项被选中

Answer 2

我的解决方案非常接近jfriend00的解决方案。然而，我的解决方案涉及data-属性(请参阅此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对象中的元素数量，
• 你应该存储关于哪些元素是"S"("特殊")元素的信息，以一种可以在选择器中检查的方式。添加特殊类或data-属性)，

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

是的，添加一个条件，确保只有3个点击，然后检查它们是你想要的。

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

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

使用.length而不是.size()被指出是更好的实践:

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

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