如何使这个 jquery 函数更简洁？

Posted 2023-05-08

【中文标题】如何使这个 jquery 函数更简洁？

【英文标题】：How can I make this jquery function more terse?

【发布时间】：2011-06-21 16:46:17

【问题描述】：

我在我的 asp.net 项目中的一个通用 javascript 文件中有此代码。

每当我将鼠标悬停在受此函数影响的按钮之一上时，jQuery-Lint 都会返回“您已多次使用相同的选择器”。

//turns all the buttons into jqueryUI buttons
//#mainBody is on the master page, #childBody is on the modal page.
$("#mainBody button, #mainBody input:submit, #mainBody input:button, #childBody button, #childBody input:submit, #childBody input:button").livequery(function () 
    $(this).button().each(function (index) 
                            $(this).ajaxStart(function () 
                                    $.data(this, "old_button_val", $(this).val());
                                    $.data(this, "old_button_disabled", $(this).button("option", "disabled"));
                                    $(this).button("option", "disabled", true).val("Wait...");
                                ).ajaxStop(function () 
                                    $(this).val($.data(this, "old_button_val")).button("option", "disabled", $.data(this, "old_button_disabled"));
                                ).ajaxError(function () 
                                    $(this).val($.data(this, "old_button_val")).button("option", "disabled", $.data(this, "old_button_disabled"));
                                );
                        );
);

here 提出了类似的问题。

【问题讨论】：

这里不需要使用.each

【参考方案1】：

// Might be a good idea now to add a class to these element
// instead of using a long selector like this
// Additionally, :button already includes <button> elements
var selector = "#mainBody input:submit, #mainBody input:button, #childBody input:submit, #childBody input:button";

$(selector).livequery(function() 
    // Store a copy of $(this), which we'll reuse... and reuse... and reuse
    var t = $(this);

    // Create the callback function shared berween
    // ajaxStop and ajaxError
    function ajaxCallback () 
        t.button('option', 
             label: t.data("old_button_val"),
             disabled: t.data('old_button_disabled')
         );
    

    t.button()
        .ajaxStart(function() 
            // Use $.fn.data instead of $.data
            t.data(
                // Using 'label' instead of 'val'
                // because <button> elements do not have 'value's
                "old_button_val", t.button('option', 'label'),
                "old_button_disabled": t.button("option", "disabled")
            ).button('option', 
                disabled: true,
                label: 'Wait...'
            );
        ).ajaxStop(ajaxCallback).ajaxError(ajaxCallback);
    );
);

免责声明：未经测试，因此不保证有效。

【讨论】：

注意：您必须使用 jQuery 1.4.3 或更高版本才能将键/值对对象传递给 .data！否则，您可能会在此脚本中看到类似“e 未定义”的错误。