使用多个命名选择器合并 jQuery 函数

Consolidating jQuery functions with multiple named selectors

本文关键字：选择器 合并 jQuery 函数      更新时间：2023-09-26

我正在寻找类似于PHP中的switch函数的技术，这样我就可以将单个函数用于多个命名选择器。将根据哪个选择器调用函数添加其他代码。

我的例子是"保存并关闭"按钮旁边的"保存"按钮，后者具有用于关闭手风琴的附加代码。

如果单击"保存"按钮，它将调用以下内容：

    $('form[name=experienceForm]').submit(function(eve) {
            eve.preventDefault();
            tinyMCE.triggerSave();
            var FormData = $(this).serialize();
            var requestThis = $(this);
            var inputCom = $(this).find('input[name=inputCom]').val();
            var inputTitle = $(this).find('input[name=inputTitle]').val();
                $.ajax({
                        type : 'POST',
                        url : '<?php echo site_url('resume/update'); ?>',
                        data: FormData,
                        dataType: "html",
                        context : $(this),
                        success : function(msg){
                        requestThis.closest('.item').children('h3').children('a').text(inputCom+' : '+inputTitle);
                        if(msg != '') {
                        showNotice(msg);
                        }
                        },
                        error: function(msg){
                        alert('FAIL '+msg);
                        }
                    }); 

    });

我希望"保存并关闭"按钮与上面相同，并添加以下内容：

    $('input[name=experienceClose]').click(function(eve) {
        eve.preventDefault();
        tinyMCE.triggerSave();          
        $(this).parent().parent().parent().parent().parent().parent().parent().parent().parent().accordion({active:"false"});
    });

不确定我是否理解这个问题，但是开关函数会这样做吗，它们在 Javascript 中也有它们？

$('input[name=experienceClose], form[name=experienceForm]').on('click submit', function(e) {
    e.preventDefault();
    tinyMCE.triggerSave();  
    switch ($(this).attr('name')) {   //based on the buttons name
        case 'experienceClose' : //would be the name of the save and close button
            //do something for save and close button
        break;
        case 'experienceForm' :  //would be the name of the save only button
            //do something for save button only
        break;
        default:
            //do something on neither of the above
    }
});

另一方面，如果它只有两个按钮，if/else 语句可能更合适。

假设按钮与类似name="experience*"这样的模式匹配，您可以执行以下操作：

// just save the form
function save(e)  { 
    // all the stuff to do in either case
}
// just close it
function close() {
    // death by a thousand parents
}
// use "on" instead of older jQuery constructs
$('form').on('click', '[name^="experience"]', function(e) {
    switch(this.name) {
        case 'experienceSave':
            save.call(this,e);
            break;
        case 'experienceForm':
            save.call(this,e);
            close();
            break;
        default: 
           throw 'Why am i here?';
     }
});

这是怎么回事：

1(选择器获取任何以"经验"开头的属性name ^=。

2( 事件处理程序中的this是被单击的元素。

3(switch在Javascript中与任何类C语言相同。

4(在这样的事情中抛出错误是件好事。如果您没有default案例并添加了更多恰好与选择器匹配的标记，那么如果没有默认值，它只会静默失败。当不应该发生的事情发生时抛出错误，使调试更容易。如果您担心真实用户看到错误，那么当您进入生产环境时，添加一个全局window.onerror处理程序，该处理程序会在静默失败之前向您发送电子邮件或其他内容:)

相关文章：