2012-04-16 24 views
1

例としてこのjsfiddleを実行してください。私の例ではイベントハンドラに引数を渡してユニークにする方法はありますか?

http://jsfiddle.net/AFzqt/11/

あなたはそれが2番目のボックスに値をコピーする最初のボックスに記入した場合、私は、上記と同じと言ってリンクを持っています。コードを見て、ディスプレイを見てください。ボックスを2回表示させるだけのコードの反復です。まあ...私の実際の使用では、私は理想的には、これらのボタンの約40が欲しいです。

コードを40回コピーすることなくこれを行う方法はありますか? 私はjqueryの新機能ですが、通常は別の言語で引数を渡すだけですが、この構文ではどうすればいいのでしょうか?私はこれをどのように処理できますか?

私jsfiddleに周りに手を出すこと自由に感じ、および

答えて

3

あなたはイベントハンドラに結合するためにそれらのそれぞれを選択することが容易になります各ボタンにchangeButtonクラスを追加する場合:

<a href="#" class="changeButton">Same as Above</a> 

をその後、我々はそのような要素のそれぞれを選択することができます:ここでは

$(".changeButton").on("click", function(e) { 

    //select the previous jQuery Mobile select widgets, we will use just the previous two 
    var $allPrev = $(this).prevAll('.ui-select').find('select'); 

    //change the value of the immediate previous select widget to the value of the one preceding it 
    $($allPrev[0]).val($($allPrev[1]).val()).selectmenu("refresh"); 

    e.preventDefault(); 
}); 

はデモです:http://jsfiddle.net/AFzqt/12/

このコードは、HTML構造の直感的な知識を使用することで機能するため、umpteenボタンで動作します(各リンクは、ページ上のリンクが存在していても前の2つの選択ウィジェットを使用します)。

+0

ありがとうジャスパー! – MoB

0

をパラメータとしてうまくいけば、エントリID年代に一つだけの関数にボタンの上と同じ「これら2の取扱いを減らすことを目標に、新しいリビジョンへのリンクこのようなことはどうですか?

function bind_click(button_id, target_id, origin_id) { 
    $(button_id).on("click", function(e) { 
    $(target_id).val($(origin_id).val()); 
    $(target_id).selectmenu("refresh"); 
    e.preventDefault(); 
    }); 
} 

$(function() { 
    bind_click("#changeButton2", "#entry_20", "#entry_18"); 
    bind_click("#another", "#entry", "#entry2"); 
    // More binding declarations 
}); 
関連する問題