Question

我正在使用jquery和html构建一个非常基本的猜谜游戏。我有6个复选框，如果触发了正确的序列，则会出现隐藏的div。为了触发div，我需要选择1,2和3.如果选择1,2和4，则会收到一条秘密消息（div2），否则没有任何反应。

我可以通过嵌套点击轻松完成触发：

 $("#1").click(function(){
  $("#2").click(function(){
   $("#3").click(function(){
    $("#div1").fadeIn();
 });
 });
 });

HTML：

<input type="checkbox" id="#1">
<input type="checkbox" id="#2">
<input type="checkbox" id="#3">
<input type="checkbox" id="#4">
<input type="checkbox" id="#5">
<input type="checkbox" id="#6">
<div id="div1" style="width:30px;height:30px;display:none;background-color:blue;"></div>
<div id="div2" style="width:30px;height:30px;display:none;background-color:yellow;"></div>

但是我很难让它消失。如果没有按下三个中的任何一个，我希望该div消失。所以让我们说你按1,2,3，div1出现，如果你取消选择3，那div1就会消失。

我想我可以通过这样的方式来表达这个问题更容易：我想告诉jquery-如果一个，两个和三个不是'全部'被选中，淡出div。

Answer 1

除了使用嵌套点击之外，这将会变得复杂和混乱，您最好创建一个通用的侦听器，它将维护已经/未被点击的列表。这不仅更容易维护，而且比分配了许多点击处理程序更加优化。

那些可能希望进一步优化的人可能会正确地说你可以编写这段代码来直接生成checked数组，而不是checked对象，这是我保留它的原因object是为了支持基于字符串的ident而不仅仅是数字的可能性。

更新了代码

以前的代码略有错误，当您选择的复选框多于您应该使用时，此版本现在可以正常运行。

的原因

为什么要更改为使用类别而不是ID

虽然id非常具体，并且对于浏览器来说更加优化，但它们通常会造成混乱并使事情变得费力，特别是在您希望复制的标记中（显然因为ID必须是唯一的）。提出一个可以在一般分组类上工作的解决方案通常要好得多，而不是用一个序列标记每个元素，即cb1，cb2，cb3。正如您所看到的，我的标记会按顺序标记复选框，但代码只会担心分组类.cb，而顺序类只能用于css样式。
为什么要添加容器div

当处理html5应用程序时，容器div将帮助你完成9次中的10次。如果你有一组元素只能以一种紧密的视觉形式存在，你将通过包装它们来帮助你。这有助于动态生成更多元素（您可以将新元素直接附加到容器），它可以帮助delegating event listeners，以及通过jQuery和CSS定位元素。
为什么使用change代替click复选框

change是专门设计用于在值发生更改时触发的事件，click旨在在发生单击时触发。您应该使用最适合您想要的活动。在这种情况下，您只希望在复选框更改其值时更新，这可能会在有或没有鼠标的情况下发生。是的，有些浏览器会在使用键盘事件时触发click事件，但最好还是清楚。
为何使用data-ident

ID应该用于快速查找目的，应该使用类进行分类和分组，如果要添加任何其他信息，则应使用data-前缀。这意味着您不受限于id和class支持的字符，并且更改data-值不会导致浏览器触发任何真正的内部计算，即应用类或元素注册。

如何改进此代码

使代码更易于访问和读取的问题意味着更容易弄清楚代码的含义，这对于应该尝试隐藏远离用户群的解决方案的游戏来说是不利的。如果这只是一个简单的游戏，那么没有什么可担心的，但如果你正在处理更严重的事情，你应该尝试找到一种方法来混淆解决方案：）

工作小提琴：

http://jsfiddle.net/RFK92/

代码：

/// your list of what is checked
var checked = {};

var updateDivs = function(){
  var ident, show, checklist = [];
  /// create a useful string from what has been checked
  for ( ident in checked ) {
    if ( checked[ident] ) {
      checklist.push(ident);
    }
  }
  checklist = checklist.join(',');
  if ( checklist == '1,2,3' ) {
    show = $('#div1');
  }
  else if ( checklist == '1,2,4' ) {
    /// show something else, or not...
  } 
  /// by using a grouping class you can find all divs that could be affected
  $('.only-one-div').not(show).fadeOut();
  if ( show ) {
    /// and single one out for reveal
    show.fadeIn();
  }
};

$('.cb').change(function(){
  var cb = $(this), ident = cb.data('ident');
  /// keep track of what is or not checked
  checked[ident] = cb.prop('checked'); /// updated to use prop!
  /// update your divs
  updateDivs();
});

<强>标记：

<div class="cbs">
  <input type="checkbox" class="cb cb1" data-ident="1" />
  <input type="checkbox" class="cb cb2" data-ident="2" />
  <input type="checkbox" class="cb cb3" data-ident="3" />
  <input type="checkbox" class="cb cb4" data-ident="4" />
  <input type="checkbox" class="cb cb5" data-ident="5" />
  <input type="checkbox" class="cb cb6" data-ident="6" />
</div>
<div id="div1" class="only-one-div">one</div>
<div id="div2" class="only-one-div">two</div>

<强>的CSS：

.only-one-div { display: none; }

Answer 2

我会看看绑定和取消绑定点击次数。

基本上，如果他们点击了第一个正确的点击，然后绑定第二个正确的点击。

任何不正确的点击都会让你取消绑定所有点击并淡化div并重新绑定第一个必要的点击。

http://api.jquery.com/bind/

http://api.jquery.com/unbind/

Answer 3

http://jsfiddle.net/CEb9x/1/

$('input[type=checkbox]').on('change', function(){
    if($('input:checked').length == 3){
        if ($('.blue:checked').length == 3) { $("#div1").fadeIn(); $("#div2").fadeOut();}
        else if ($('input[name="secret"]:checked').length == 3) { $("#div1").fadeOut(); $("#div2").fadeIn(); }
    } else { $("#div1, #div2").fadeOut(); }
  });

Answer 4

这应该做：

$("#1").click(function(){
    checkboxClicked();
});
$("#2").click(function(){
    checkboxClicked();
});
$("#3").click(function(){
    checkboxClicked();
});
$("#4").click(function(){
    checkboxClicked();
});
$("#5").click(function(){
    checkboxClicked();
});
$("#6").click(function(){
    checkboxClicked();
});
...
...
function checkboxClicked() {
    if ($('#1').is(':checked') && $('#2').is(':checked') && $('#3').is(':checked') {
        $('#div1').show();
        $('#div2').hide();
    }
    else {
        $('#div1').hide();
    }
    if ($('#1').is(':checked') && $('#2').is(':checked') && $('#4').is(':checked') {
        $('#div2').show();
        $('#div1').hide();
    }
    else {
        $('#div2').hide();
    }
}

基本的Jquery-淡出/淡入

4 个答案:

更新了代码

如何改进此代码