Question

我正在尝试组织我的JS功能，整齐地，onClick一个接一个地发生。目前他们都在乱开火，乱糟糟的;与 Click = 1相反;并且Click = 2执行此操作。有什么指针吗？下面是我的JS。完整的演示链接可以在：http://bit.ly/10BW89N'看到。你可以通过访问我的演示来看到我的意思，并注意到点击不按顺序1,2,3,4等 - 贯穿始终。

点击钉头，请注意单击3突然跳过以单击8.我正在尝试这样做，以便我可以轻松地根据特定的点击数添加功能。 EG。第30次点击，最后一次点击，做了一些真正非常酷的事情但它必须在第30次点击时触发，而不是像第3次那样触发目的。

$(document).ready(function () {
    var a1_Events = [function1, function2, function3, function5, function6, function7, function8],
        a1_c = 0;
    function function1() {
        alert('Click 1!');
    }
    function function2() {
        alert('Click 2!');
    }
    function function3() {
        $("#area1").hide();
        $("#area2").show();
        alert('Click 3!');

    }
    function function5() {
        alert('Click 4!');
    }
    function function6() {
        $("#bg_div").hide(0).delay(1500).show(0);
        $("#bg_skew").show(0).delay(1500).hide(0);
        alert('Click 5!');

    }
    function function7() {
        alert('Click 6!');
    }
    function function8() {
        $("#area1").hide(0).delay(1500).show(0);
        $("#area2").hide(0).delay(1500).show(0);
        $("#sound1").show(0).delay(4500).hide(0);

            document.getElementById("id1").play(); // OK..

        $("#hammer").show(0).delay(1500).hide(0);
        $("#youwin").show(0).delay(3500).hide(0);
        alert('Click 7!');


    }
    $('#area1').click(function () {
        a1_Events[a1_c++ % a1_Events.length]();
    });
    $("#area2").click(function () {
        $("#area1").show();
        $("#area2").hide();
          alert('Click 8!');
    });
});

function alert(msg) {
    $("#alert").text(msg).show(0).delay(1500).hide(0);
}

在以前的项目中 - 在视频中定义自定义提示点;我找到了一个解决方案来整齐地调用并声明自定义提示点，如下所示;如果我可以用CLICKS做类似的话，那将是 COOL （http://www.urbandictionary.com/define.php?term=cool）;并组织我当前的功能整齐地出现每次点击类似于我的cuepoints所以我可以很容易地添加功能;并更新每次点击发生的事情

$(document).ready(function(){
//Slides object with a time (integer) and a html string
var slides = {
0: "This is the first subtitle. You can put html in here if you like",
4: "A fluffy thing eating some grass.",
12: "Oh look it's a castle on a hill. Nice",
23: "Some horses",
34: "Wow look at those woolly sheep eating grass.",
40: "For more information on this plugin visit github/owainlewis or email owain@owainlewis.com",
50: "Cuepoint.js is an open source plugin for adding subtitles and cue-points to your HTML5 video"
}

Answer 1

我想你应该怎么做才能让你的功能以正确的顺序执行/在点击量之后你可以做到以下几点：

首先，不是将对函数的引用存储在数组中，而是将它们存储在哈希中，如下所示：

    var a1_Events = {
      1: function1, 
      3: function2, 
      7: function3, 
      12: function5, 
      20: function6, 
      23: function7, 
      30: function8
    },
    a1_c = 0;

将数字设置为函数应执行的单击量。然后在您的点击处理程序中另外增加al_c中的点击次数：

    $('#area1').click(function () {
      al_c++;
      if (a1_Events[al_c] !== undefined) {
        al_Events[al_c]();
      }
    });

基本上你增加点击次数，然后你尝试查找你的哈希中是否有一个与点击量相对应的函数，如果你有一个你执行它。

使用此解决方案，您可以轻松地向哈希添加函数，如：

al_Events[33] = function12;

并删除它们：

delete al_Events[3];

希望这能解决你的问题。

JS函数每次点击触发，点击计数，按顺序

1 个答案: