1

以下のスクリプト設定があります。クリックごとにより具体的に機能が割り当てられているスクリプトをより適切に書き直したいのですが、EG. Click = 3 does so and so, and Click = 4, does this and that.

EDIT : たとえば、' http://bit.ly/10BW89N ' 通知で私のライブ サンプルを表示できます。試してテストするために単純な「アラート」を追加しましたが、クリックと機能はまだ適切な順序で起動しません。

$(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();
    });
});

..助言がありますか？

4

2 に答える 2

2

このようなものはどうですか？

$(document).ready(function () {
    var a1_c = 0, a1_Events = {
        0: function() {
               alert('SHAKING!');
           },
        1: function() {
               alert('BZZZZZZZZZZZ!');
           },
        2: function() {
               $("#area1").hide();
               $("#area2").show();
           },
        3: function() {
               alert('YES!');
           },
        4: function() {
               $("#bg_div").hide(0).delay(1500).show(0);
               $("#bg_skew").show(0).delay(1500).hide(0);
           },
        5: function() {
               alert('NO!');
           },
        6: function() {
               $("#area1").hide(0).delay(1500).show(0);
               $("#area2").hide(0).delay(1500).show(0);
               $("#sound1").show(0).delay(1500).hide(0);
           }
    }, a1_EventCount = Object.keys(a1_Events).length; // or hard-code 7.

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

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

ない環境にObject.keysいて、shim を使用したくない場合は、イベント カウントをハードコードするだけでかまいませんが、イベントを追加または削除する場合は忘れずに変更する必要があります。

これは、インデックス アクセスの配列と同じように機能しますが、特定の関数を特定の値に明示的に割り当てることができます。

于 2013-07-04T02:19:51.670 に答える
1

JavaScriptswitchステートメントを次のようないくつかの jQuery 関数と組み合わせて使用​​すると、コードを簡素化し、必要なことを行うことができます。

 //global userClicks variable holds count of user clicks
 var userClicks = 0;     

 //Standard jQuery click function to catch the user clicks       
 $('#area1').click(function () {

        //code to increment clicks here...
        userClicks+=1;

        //call the below function with the switch statement and execution code
        callSwitch(userClicks);

 });

   //the JavaScript function which takes the number of clicks as a parameter
   function callSwitch(numClicks){

      //switch statement based on parameter passed to enclosing function
      switch (numClicks) 
        {
        case 1:
          alert('SHAKING!');
          break; 

        case 2:
           alert('BZZZZZZZZZZZ!');
           break;

        case 3:
          $("#area1").hide();
          $("#area2").show();
          break;

        case 5:
          alert('YES!');
          break;

        case 6:
          $("#bg_div").hide(0).delay(1500).show(0);
          $("#bg_skew").show(0).delay(1500).hide(0);
          break;

        case 7:
          alert('NO!');
          break;

        case 8:
          $("#area1").hide(0).delay(1500).show(0);
          $("#area2").hide(0).delay(1500).show(0);
          $("#sound1").show(0).delay(1500).hide(0);
          break;
        }
   }

これの実装例については、私の JSFiddle リンクを次に示します。

また、実装にあるように関数を分離したままにして、case必要に応じて各条件ブロックから呼び出すこともできます。

switch (numClicks) 
          {
            case 1:
              function1();
              break;        
            case 2:
               function2();
               break;
            case 3:
              function3();
              break;
          }

それが役立つことを願っています。

于 2013-07-04T00:47:22.433 に答える