Question

我最近写了很多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);
     } 
}

第二次编辑：

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

Answer 1

回答你的问题：01

要选择不同的选择器，需要用逗号分隔，请详细了解 jQuery Selectore

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

});

是对的。

回答你的问题：02

对于多个直播事件绑定事件名称也应该<逗号>用逗号分隔。详细了解 jQuery events 。

如果是活动事件绑定，我们不应该使用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');

}

注意我认为您不需要任何循环。

我希望你能得到所有答案。快乐的编码:(

Answer 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功能为deprecated。建议您改为使用delegate或on。

以下是delegate的示例：

$(document).delegate("input[type=text]", "click", function() {
    if ($.inArray(["one", "two", "three"], $(this).attr("name")) !== -1) {
        // handle the event here
    }
});

Answer 3

对于＃2，你不需要单词and。 jQuery绑定可以接受多个事件，只是空格分隔。

Answer 4

我使用函数来过滤输入：

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

现场演示： http://jsfiddle.net/rhKBy/

一些JQuery代码快捷方式

4 个答案:

想要发送输入字段数组作为函数

根据编辑