一些JQuery代码快捷方式

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

谢谢

编辑:

我也有这个用例,我想在多个元素上翻转显示,我在这个论坛上发现了这个,但我还没有测试过它.这是我的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'); 
}

Answer 1

回答你的问题: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');

}

注意我认为你不需要任何循环.

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