0

クリックごとに 2 つの結果のうちの 1 つを持つ onclick 関数を作成しようとしています。つまり、ユーザーが onclick 要素を初めてクリックすると、結果 1 が発生します。次に、ユーザーが同じ要素をもう一度クリックすると、結果 2 が発生します。ユーザーが要素を 3 回クリックすると、結果 1 が再び発生します。4 回クリックすると、結果 2 が発生します。など、ループのように。以下は、説明するための疑似jQueryです...

$(function(){
            var hits = 0;
    $('#myButton').click(function(){
                    if  (var hits = pos ) 
                    {
              $('#content1').fadeIn("slow");
              $('#content2').fadeOut("slow");
                    }
                    else
                    {
              $('#content1').fadeOut("slow");
              $('#content2').fadeIn("slow");
                    }
        return false;
    });
});

用語が大きく異なる可能性があるため、答えを探すのに苦労しました。「変数」から「トリガー」、「配列」、「リスナー」、「ハンドラー」、「条件付き」、「バインド」...どこから検索を開始しますか? 関数を作成するには複数の方法があることはわかっていますが、最も簡単で効率的な方法を見つけるには、このサイトが最適です。そのため、構文的に私を助けることに加えて、私がリストした単語のクラスターに関する用語の助けも欲しい. 各用語の一般的な意味は知っていますが、作成しようとしているシナリオ/機能にそれらを適用する場合、それぞれの役割はどこにありますか? これは、多くの人にとって問題を解決するのに役立つと思います。前もって感謝します。

迅速かつ精巧でプロフェッショナルなフィードバックをありがとうございました。この新しい知識を有効に活用します。JQuery は実際に物事をシンプルにします。ただし、この質問をした主な理由は、クリック機能ではなくキーダウン機能に適用することでした。答えを見つけて、いくつかのコードを交換できると思いました。おそらく、通常の JavaScript を使用すれば、これでうまくいくでしょう。皆さんが提供した知識とフィードバックを使用して、キーダウン機能を含む別のシナリオを考え出す新しい質問を投稿しました。あなたの助けのおかげで構文はかなり近いと思いますが、ほとんどではありません。ご覧になりたい場合は、こちらの URL をご覧ください: keydown listen 関数でイベント ハンドラーをバインドする JavaScript jQuery あなたたちは本当にロックです。

4

5 に答える 5

5

jQuery には.toggle(handlers)、交互クリック機能があります。

$('#myButton').toggle(function() {
    $('#content1').fadeIn("slow");
    $('#content2').fadeOut("slow");
}, function() {
    $('#content1').fadeOut("slow");
    $('#content2').fadeIn("slow");
});

フィドル

2 つの要素をそれぞれフェードイン/フェードアウトして切り替えるだけの場合は、次を使用できます.fadeToggle()。

$('#myButton').click(function() {
    $('#content1, #content2').fadeToggle("slow");
});

フィドル

于 2012-10-20T19:55:34.597 に答える
2

いくつかの用語などを知りたいので、言語に依存しない用語を提供します。

基本的に、私はあなたの要件を「ステートマシン」と呼びます。

非常に基本的なことですが、ステートマシンには、「状態」、「イベント」、および「遷移関数」が含まれています。あなたの場合、2つの状態（「表示」と「非表示」と呼びましょう）、1つのイベント（「クリック」）、2つの遷移関数（「showContentOne」と「showContentTwo」と呼ぶことができます）があります。

2つの明確な用語：

  • 状態はあなたの記憶です（過去に何が起こったかを教えてくれます）
  • イベントとは、状態の変化を引き起こす外部アクティビティです。
  • 遷移関数は、状態をある状態から別の状態に変更（または「遷移」）する（場合によってはいくつかの副作用を実行する）ことを目的として、状態変更イベントが発生したときに呼び出される関数です。

以下では、概念の非常に基本的な（実際にはあまりにも基本的な）説明を提供しますが、ここでは物事を単純化しすぎていることに注意してください。本やウィキペディアの適切な記事を読んで、より正確な情報を入手してください。

ステートマシンは、次の場合にグラフで最もよく説明できます。

ステートマシングラフ

では、これを適切に実装するにはどうすればよいでしょうか。

要素の状態を格納するための変数が必要です。コードスニペットでは、「ヒット」と呼ばれるグローバル変数を使用しました。jQueryを使用するときは、代わりに「データ」関数を使用して、任意のデータをDOM要素にバインドします（このようにして、単一のDOMツリーに多数の独立したステートマシンをインストールできます）。次に、イベントハンドラーをバインドし（考慮すべきイベントが1つしかないため、クリックするだけなので簡単です）、状態遷移関数を定義する必要があります。最後に、要素の状態をチェックし、着信イベントを分析し、適切な状態遷移関数を呼び出す関数が必要です。

いくつかの基本的な実装は次のようになります（このコードはテストしません。実行可能なソリューションを取得するのに役立つ疑似コードとして扱います）

function showContentOne($element) {
     $('#content1').fadeIn("slow");
     $('#content2').fadeOut("slow");
     $element.data('state', 'hidden');
}

function showContentTwo($element) {
     $('#content1').fadeOut("slow");
     $('#content2').fadeIn("slow");         
     $element.data('state', 'visible');
}

function transitState($element, event) {
     var state = $element.data('state');
     if (state == 'visible' && event == 'click') {
          showContentTwo($element);
     } else if (state == 'hidden' && event == 'click') {
          showContentOne($element);
     } else {
          //unsupported transition - do nothing or raise error
     }
}

$(function(){
    $('#myButton')
        .data('state', 'visible') //initialize a state
        .click(function() { //install event handler
          transitState($(this), 'click');
        }
        //here you can possibly install more event handlers
    });
});

ここで、「transitState」を再実装してステートマシン定義などの配列またはオブジェクトを使用すると、イベントやその他の状態遷移関数を追加/削除するための非常に堅牢なソリューションを得ることができます。ステートマシンは任意の要素にインストールできます。おそらくこれをjqueryプラグインでラップします。

注：あなたの場合、私の解決策はこのタスクの深刻な過剰設計です。私はあなたにいくつかの用語を与えるためにそれを提供しました。非常に基本的な問題（2つの状態、2つの遷移、1つのイベント）は、元の質問で示したのと非常によく似た方法で簡単に実装できます。変更するのは、グローバル変数を使用せず、状態を維持するためのデータ関数だけです。正確に2つの状態があるため、それを保持するブール変数は完全に問題ありません。

$(function(){

$('#myButton')
    .data('isVisible', true)
    .click(function(){
         if  ($(this).data('isVisible')) { 
              $('#content1').fadeIn("slow");
              $('#content2').fadeOut("slow");
         } else {
              $('#content1').fadeOut("slow");
              $('#content2').fadeIn("slow");
         }
         $(this).data('isVisible', !$(this).data('isVisibile'));
         return false;
    });
});

また、連続クリックで要素の表示を変更するために他の人が述べたように、トグル機能を使用できます。

私の貧弱な英語でごめんなさい：/

于 2012-10-20T20:30:53.807 に答える
1

試す：

$(function(){
            var hits = 0; //->variable
    // Everything below this line is called "binding" a handler to an event (click event)
    $('#myButton').click(function(){ // --> This whole function is the handler or listener
                    if  (hits % 2 !== 0) //for hits 2,4,6,8 etc. Also the condition
                    {
              $('#content1').fadeIn("slow");
              $('#content2').fadeOut("slow");
                    }
                    else
                    { // for hits 1,3,5,7
              $('#content1').fadeOut("slow");
              $('#content2').fadeIn("slow");
                    }
                   hits++;
        return false;
    });
});
于 2012-10-20T19:55:52.210 に答える
0

次のように使用されるjQuery の toggle()メソッドを調べてみることをお勧めします。

$(function() {
    $('#myButton').toggle(function(){...}, function(){...});
});

また、DIY 方法の修正版も提供します。

$(function(){
    var hits = 0;

    $('#myButton').click(function(){
        hits ^= 1;

        if  ( hits ) {
            $('#content1').fadeIn("slow");
            $('#content2').fadeOut("slow");
        } else {
            $('#content1').fadeOut("slow");
            $('#content2').fadeIn("slow");
        }

        return false;
    });
});
于 2012-10-20T19:56:20.230 に答える
0

これを簡単に実現し、おそらくもう少しエレガントにする方法の 1 つは、次の単純なプラグインを作成することです。

(function ($) {
    $.fn.rollerClick = function (handlers) {
        this.each(function () {
            this.hits = 0;
            $(this).click(function () {
                handlers[this.hits ++](this);
                if (this.hits == handlers.length) {
                    this.hits = 0;
                }
            }); 
        });
    };
)(jQuery);

これで、次のように使用できます。

$("selector").rollerClick([
    function (element) {
        alert('1');
    },
    function (element) {
        alert('2');
    },
    function (element) {
        alert('3');
    }
]);

次に、選択したアイテムを繰り返しクリックすると、ハンドラーがロールスルーされ、「1」、「2」、「3」、「1」、「2」、...を示すアラートがポップアップ表示されます。

于 2012-10-20T19:57:41.587 に答える