Question

所以我正在尝试设置一个侦听IF的功能，只有3个特殊项目被“检查”。

到目前为止，我有一个包含9个项目的列表，当3“S”（特殊）具有单击的类时，背景将变为蓝色，然后如果未单击任何一个，则返回。

我想知道的是，是否有办法使条件满足（蓝色背景）如果只检查三个“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/。

我所做的改变：

使所有id值合法（不能以数字开头）
为特殊和非特殊的li标签添加一个唯一的类，以便使用jQuery选择器轻松找到它们
更改单击切换以使用完全符合您要求的toggleClass方法
使用选择器并查看其长度，以查看所点击的课程中有多少特殊项目。
添加逻辑以确保未选中“r”项目

Answer 2

我的解决方案非常接近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对象中的元素数量，
您应该以可以在选择器中检查的方式存储有关哪些元素是“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/

jQuery列表独占功能

5 个答案: