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

谢谢

编辑：

我也有这个用例，我想在多个元素上翻转显示，我在这个论坛上找到了这个，但我还没有测试过。这是我的 impl，我欢迎就该策略提供反馈

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

第二次编辑：

这是代码的最终版本，经过测试并且可以完美运行！感谢@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();

对于第二件事，您可以这样做：

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

请记住，该live功能已弃用。建议您使用delegateoron代替。

这是一个例子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 回答