1

プロトタイプJavaScriptを使用しています。ボタンがあり、Event.observeメソッドを使用してクリックアクションを監視したいと思います。

問題は、PHPコードのifステートメントに応じて2つの関数のいずれかを呼び出したいということです。私のJavascriptとEvent.observeメソッドの理解はかなり限られていますが、存在しない要素を観察しようとするとコードが機能しないようです。次のように、これを非常にハッキーな方法で機能させることができます。

<?php if ($_type == "forward_second"):?>
    <input type="button" id="week_backward_second" value="&lt;&lt;" disabled/>
    <input type="hidden" id="week_backward" value="&lt;&lt;" />
<?php else: ?>
    <input type="button" id="week_backward" value="&lt;&lt;" disabled/>
    <input type="hidden" id="week_backward_second" value="&lt;&lt;" />
<?php endif; ?>

そしてJavaScriptで:

initialize: function {    
    Event.observe('week_backward', 'click', this.backward.bind(this));
    Event.observe('week_backward_second', 'click', this.backwardSecond.bind(this));
},

隠しフィールドを持つことにより、「不要」Event.observeには監視する要素があり、コードは機能します。

誰かがこれを行うためのより良い方法を提案できますか?

4

3 に答える 3

2

私はあなたの質問を理解したことを願っています:)

var element = $('week_backward'),
    method = this.backward;

// Get a second element if first doesn't exist.
if (!element) {
    element = $('week_backward_second');
    method = this.backwardSecond;
}

element.observe('click', method.bind(this));

私はより短いプロトタイプAPIを使用しました-他のライブラリとの競合がない限り、私はそれをお勧めします。

PS。ボタンを1つだけ印刷するだけで、非表示のボタンは表示されないことを忘れました。

于 2012-07-14T19:50:06.633 に答える
1
  1. 隠しフィールドはありません。観察する前に要素の存在を確認してください(Reinmarが書いたように):

    initialize: function {    
        if ($('week_backward')) $('week_backward').observe('click', this.backward.bind(this));
        if ($('week_backward_second')) $('week_backward_second').observe('click', this.backwardSecond.bind(this));
    },
    
  2. 隠しフィールドはありません。イベント委任を使用する:

    initialize: function {
        document.on('click', '#week_backward', this.backward.bind(this));
        document.on('click', '#week_backward_second', this.backwardSecond.bind(this));
    },
    

    オブザーバーは、要素にアタッチされており、要素が存在する場合は要素からバブルされたイベントdocumentを受け取ります。click

于 2012-10-04T08:31:32.087 に答える
0

これを処理する別の方法は、$$を使用して呼び出すことです。このようにして、要素が1つまたはまったくない配列を反復処理し、必要に応じてメソッドを適用します。

$$('#week_backward').invoke('observe', 'click', this.backward);
$$('#week_backward_second').invoke('observe', 'click', this.backwardSecond);
于 2014-01-20T21:51:51.587 に答える