Question

我正在寻找类似于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"});
    });

Answer 1

不确定我是否得到了这个问题，但是切换功能是否可以执行此操作，他们是否在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语句可能更合适。

Answer 2

假设按钮与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处理程序，在以静默方式失败之前向您发送电子邮件或其他内容：）

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

2 个答案: