Question

$('#form').addClass('hide');

$(document).ready(function () {
  var count = 0;

  $('#cat3,#cat2,#cat1').click(function () {
    count += 1;

    if (count == 3) {
        $('#form').removeClass('hide');
    } 
 });
})();

我有4个div，cat1，cat2，cat3和form。单击每个cat div一次后，将出现表单。现在，您可以单击一只猫3次以显示表单。我希望每只猫都有自己的点击功能，并为计数做出贡献。一旦计数达到3，就会出现#form。

我不认为我太离谱了，但我不确定如何分开点击计数器，因此每个只能点击/计算一次。有什么想法吗？

我的小提琴：http://jsfiddle.net/aztVY/253/

Answer 1

我只是在每个上设置一个数据属性，然后检查长度是否等于3。

$('#form').addClass('hide');
var count = 0;
$('#cat3,#cat2,#cat1').click(function () {
    $(this).data('clicked', true);
    if ($('#cat3,#cat2,#cat1').filter(function () {
        return $(this).data('clicked') == true
    }).length == 3) $('#form').removeClass('hide');
});

<强> jsFiddle example

Answer 2

这只是另一种方式，使用类和.one()：

$('#form').addClass('hide');
$('#cat3,#cat2,#cat1').one('click', function () {
    $(this).addClass('clicked');
    if ($('.clicked').length == 3) $('#form').removeClass('hide');
});

-DEMO-

Answer 3

检查此fiddle：

$(document).ready(function () {
  var count = 0;
  var divsClicked = [];
  $('#cat3,#cat2,#cat1').click(function (event) {
     if(divsClicked.indexOf(event.target.id) < 0){
        divsClicked.push(event.target.id)
     }

    if (divsClicked.length == 3) {
        $('#form').removeClass('hide');
        divsClicked = [];
    }
 });
});

Answer 4

谢谢大家。我感谢您的帮助。这就是我最终做的事情。

<script type="text/javascript">
$('#form').addClass('hide');
var hintCounter = 15;

$('#cat15,#cat14,#cat13,#cat12,#cat11,#cat10,#cat09,#cat08,#cat07,#cat06,#cat05,#cat04,#cat03,#cat02,#cat01').click(function () {
    // check if has hints
    if (hintCounter > 0) {
        if (!$(this).hasClass("highlighted")) {
            hintCounter--;
        }

    $('.xHints').html(hintCounter + ' Cats Left to Find');
    } else {
        // else show the message out of hints
    }
    $(this).addClass("highlighted");
   if (hintCounter == 0) {
        $('#form').removeClass('hide');
    } 
});
</script>

这是生产中的应用程序：http://www.worldsbestcatlitter.com/facebook/whisker-wonderland/

点击功能上的addClass，单个与多个

4 个答案:

-DEMO-