2

私は最近、繰り返されるように見える多くの JQuery コードを書いています。次のショートカットがあるかどうか疑問に思っています。

1) 複数の要素を名前で選択する、つまり

$("input[type=text][name=one][name=two][name=three]").live(); <-- is that correct syntax

2) 複数のライブバインディング、つまり

$("input[type=text]").live('blur and click',function(){});

ありがとう

編集：

複数の要素の表示を反転したいこのユースケースもあります。これはこのフォーラムで見つけましたが、まだテストしていません。これが私の実装であり、戦略に関するフィードバックを歓迎します

$("#btn_account_edit").live('click',function(){
    flip_display_on_off(
        $("#btn_account_edit_cancel, #btn_account_save, #account_edit_form"),
        $("#btn_account_edit, #account_edit_static"),
        false,true);
});
$("#btn_account_edit_cancel").live('click',function(){
    flip_display_on_off(
        $("#btn_account_edit_cancel, #btn_account_save, #account_edit_form"),
        $("#btn_account_edit, #account_edit_static"),
        true,false);
});

   

function flip_display_on_off($element_set1,$element_set2,flip1,flip2) {
    var display1 = 'block' ? if flip1 : 'none';
    var display2 = 'none' ? if flip2 : 'block';
    for (i =0; i < element_set1.length; i++) {
        $element_set1[i].css('display',display1);
    }
    for (i =0; i < element_set2.length; i++) {
        $element_set2[i].css('display',display2);
     } 
}

2番目の編集:

これはコードの最終バージョンであり、テスト済みで完全に動作します! @thecodeparadoxに感謝します

$("#btn_account_edit").live('click',function(){
    flip_display_on_off(
        $("#btn_account_edit_cancel, #btn_account_save, #account_edit_form"),
        $("#btn_account_edit, #account_edit_static"),
        true);
});

$("#btn_account_edit_cancel").live('click',function(){
    flip_display_on_off(
        $("#btn_account_edit_cancel, #btn_account_save, #account_edit_form"),
        $("#btn_account_edit, #account_edit_static"),
        false);
});

function flip_display_on_off($element_set1, $element_set2, flip1) {
    $element_set1.css('display', flip1 ? 'block' : 'none');
    $element_set2.css('display', flip1 ? 'none' : 'block'); 
}
4

4 に答える 4

5

あなたの質問への答え: 01

別のセレクターを選択するには、コンマで区切る必要があります。jQuery Selectoreの詳細をお読みください。

$("#container").on('click', ":text[name=one], :text[name=two], :text[name=three]", function() {

});

正しい。

あなたの質問への答え: 02

複数のライブ イベントのバインド イベント名もコンマで区切る必要があります。jQuery イベントの詳細を参照してください。

ライブ イベント バインディングの場合、非推奨のため live を使用しないでください。その代わりに.on()を使用する必要があります。

// here #container is the parent of input[type=text]
// which is already exits in DOM

$("#container").on("blur click", "input[type=text]", function(){

});

.delegate()と呼ばれるライブ イベント委任の別のオプションがあります。次のように実装します。

$("#container").delegate("input[type=text]", "blur click", function(){

});

コメントによると

入力フィールドの配列を関数のパラメーターとして送信したい

function handlerToInputs(inputParams) {
  var filter = inputParams.join(', ');
  $("#container").on("blur click", filter, function(){

  });
}

// on checkbox click you execute a function with inputs
// if checkbox needs delegate event then
// bind live event like above

$(':checkbox').on('click', function() {
  hadlerToInputs([":text[name=one]", ":text[name=two]", ":text[name=three]"]);
});

編集によると

$("#some_container").on('click', #btn_account_editfunction(){
    flip_display_on_off(
        $("#btn_account_edit_cancel, #btn_account_save, #account_edit_form"),
        $("#btn_account_edit, #account_edit_static"),
        false,true);
});
$("#some_container").on('click',"#btn_account_edit_cancel", function(){
    flip_display_on_off(
        $("#btn_account_edit_cancel, #btn_account_save, #account_edit_form"),
        $("#btn_account_edit, #account_edit_static"),
        true,false);
});

function flip_display_on_off($element_set1, $element_set2, flip1, flip2) {

    // making flip for first set of elements
    $element_set1.css('display', flip1 ? 'block' : 'none');

    // making flip for second set of elements
    $element_set2.css('display', flip2 ? 'block' : 'none');

}

注ルーピーは必要ないと思います。

すべての答えが得られることを願っています。ハッピーコーディング:(

于 2012-05-31T18:43:25.473 に答える
2

あなたがやろうとしている最初のことはうまくいきません。次のように合理的に簡潔に行うことができます。

$("input[type=text]").filter("[name=one], [name=two], [name=three]").live();

多数の名前がある場合は、次のようにさらに簡単に実行できる場合があります。

$("input[type=text]").filter(function() {
    return $.inArray(["one", "two", "three"], $(this).attr("name")) !== -1;
}).live();

2番目に、これを行うことができます：

$("input[type=text]").live("blur click", function() {
});

liveこの関数は非推奨であることに注意してください。代わりにdelegateorを使用することをお勧めします。on

を使用した例を次に示しdelegateます。

$(document).delegate("input[type=text]", "click", function() {
    if ($.inArray(["one", "two", "three"], $(this).attr("name")) !== -1) {
        // handle the event here
    }
});
于 2012-05-31T18:44:42.223 に答える
1

＃2に関しては、そこに単語は必要ありませんand。jQuery バインディングは、スペースで区切られた複数のイベントを受け取ることができます。

于 2012-05-31T18:44:41.910 に答える
0

関数を使用して入力をフィルタリングします。

$( 'input:text' ).filter(function () { 
    return /one|two|three/.test( this.name ); 
})

ライブデモ: http://jsfiddle.net/rhKBy/

于 2012-05-31T18:58:56.763 に答える