特定点击的功能,点击计数器在一个div按钮

时间:2013-07-03 16:47:18

标签: javascript jquery

我正在创建一个迷你JavaScript游戏。我希望通过点击计数器通过一个#div按钮在一定数量的点击次数下发生一系列效果和功能。

我在功能中实现我所寻求的效果方面非常接近,但我需要根据点击次数和点击次数对其进行整理,并且只需一个#div按钮就可以发生错误。因此,基本上将所有这些功能绑定到一个按钮没有问题。

我想要一个点击计数器。 EG, Click 1 = This function fires. Click 2 = This function fires.目前我的大部分功能都可以使用,但是所有功能都可以解决。 需要触发这些功能,特定于点击次数。因此,还需要计算和存储点击次数。

任何指针?

以下是它的形成方式:

 $(document).ready(function() {

$var a1_Events = [function1, function2, function3, function4, function5, function6, function7, function8],
    a1_c = 0;


function function1(){
  alert('SHAKING!');
}

function function2(){
  alert('BZZZZZZZZZZZ!');
}

function function3(){
  $("#area1").click(function(){
    $("#area1").hide();
    $("#area2").show();
  });
}

function function4(){
  $("#area2").click(function(){
    $("#area1").show();
    $("#area2").hide();
  });
}

function function5(){
  alert('YES!');
}

function function6(){
$("#area1").click(function(){
  $("#bg_div").hide(0).delay(1500).show(0);
  $("#bg_skew").show(0).delay(1500).hide(0);
   });
}

function function7(){
  alert('NO!');
}

function function8(){
$("#area1").click(function(){
  $("#area1").hide(0).delay(1500).show(0);
  $("#area2").hide(0).delay(1500).show(0);
  $("#sound1").show(0).delay(1500).hide(0);
   });
}

$('#area1').click(function(){
   a1_Events[a1_c++ % a1_Events.length]();
  });
});

&安培;是。我试图允许一个 div作为主要的“按钮”,可以说,允许这些功能每次点击触发。首先单击,BOOM,此功能发生,第二次单击BAM,此功能发生,依此类推。可能通过存储和跟踪点击次数。再次点击特定点击'x'而不是每次点击。

1 个答案:

答案 0 :(得分:1)

你已经用它做了你想做的事情:

$('#area1').click(function () {
   a1_Events[a1_c++ % a1_Events.length]();
});

但是,作为Bergi pointed out,您的一些点击处理程序会绑定其他点击处理程序。一旦调用了这些,每次点击都会调用多个函数。将这些函数更改为不绑定新的单击处理程序,但只执行操作。例如,function3()应为:

function function3() {
    $("#area1").hide();
    $("#area2").show();
}

以同样的方式更改function6()function8()。删除function4()作为#area1的点击处理程序。它永远不会被调用,因为它不会被设置为function3()之后被调用,它隐藏#area1,使其无法点击。只需将#area2的click事件直接绑定到文档就绪处理程序中。你有$var a1_Events。我认为这只是一个错字。

$(document).ready(function () {
    var a1_Events = [function1, function2, function3, function5, function6, function7, function8],
        a1_c = 0;
    function function1() {
        alert('SHAKING!');
    }
    function function2() {
        alert('BZZZZZZZZZZZ!');
    }
    function function3() {
        $("#area1").hide();
        $("#area2").show();
    }
    function function5() {
        alert('YES!');
    }
    function function6() {
        $("#bg_div").hide(0).delay(1500).show(0);
        $("#bg_skew").show(0).delay(1500).hide(0);
    }
    function function7() {
        alert('NO!');
    }
    function function8() {
        $("#area1").hide(0).delay(1500).show(0);
        $("#area2").hide(0).delay(1500).show(0);
        $("#sound1").show(0).delay(1500).hide(0);
    }
    $('#area1').click(function () {
        a1_Events[a1_c++ % a1_Events.length]();
    });
    $("#area2").click(function () {
        $("#area1").show();
        $("#area2").hide();
    });
});

jsfiddle.net/uWVAb