如何在 jquery 中创建“可重用”函数？

Posted 2023-02-25

【中文标题】如何在 jquery 中创建“可重用”函数？

【英文标题】：How to create a "reusable" function in jquery?

【发布时间】：2012-01-05 06:35:44

【问题描述】：

我有这段代码很好用：

function displayVals() 
    var phonevals = $("#bphonesel").val();
    $('#bphone').val(phonevals);


$("select").change(displayVals);
displayVals();

我希望能够将它重复用于我网站上的所有其他选择框。所以，我想我会使用参数来做到这一点。但是，到目前为止，我一直无法使语法正确。这是我所拥有的，但它不起作用。任何帮助将不胜感激。

function displayVals(inputfld, boundfld) 
    var nvenval = $(inputfld).val();
    $(boundfld).val(nvenval);


$("select").change(displayVals());
displayVals('#bphonesel', '#bphone');

【参考方案1】：

如果你想把它变成一个 jQuery 函数，像这样：

$.fn.displayVals = function() 
// Function stuff goes here
);

$('#element').displayVals()

在函数内部，$(this) 的工作方式与您期望的一样。只需在 docReady 之外定义它就可以了。话虽如此，看起来您只需要在 .change 事件内的 displayVals() 调用中定义选择器：

$("select").change(displayVals('#bphonesel','#bphone'));

除此之外，我必须查看您的其余代码才能了解可能导致问题的原因。

【讨论】：

你不应该在 jQuery 函数中使用$(this)，this 已经是一个扩展对象。

哎呀。你是对的 :) 无论如何，Chris Fulstow 的回答要好得多。

【参考方案2】：

$.fn.displayVals = function(inputfld, boundfld) 
    this.change(function() 
        var nvenval = $(inputfld).val();
        $(boundfld).val(nvenval);
    


$("select").displayVals();

查看jQuery docs on authoring plugins 了解更多信息。

【参考方案3】：

我可能会这样做：

    (function( $ )
          $.fn.displayVals = function() 

            this.change(function() 
                var val = $(this).val();
                var elemid = $(this).attr("data-elem");
                if (elemid)
                    $("#" + elemid).html(val);
            );

          ;
        )( jQuery );

    $(function () 
        $(".display-vals").displayVals();
    );

然后，在您希望它处理的任何选择元素上，您可以执行以下操作：:

<select class="display-vals" data-elem="val-div">
    <option>item 1</option>
    <option>item 2</option>
    <option>item 3</option>
</select>

<div id="val-div"></div>

这使用 html5 样式的“data-”属性。这也意味着您不必在文档加载事件中设置每个单独的下拉菜单，每个选择都可以在 html 中指定自己的显示元素。

【讨论】：

感谢您的意见。我进入了项目的另一部分，还不能尝试这些建议，但我很快就会，然后再报告。 :