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

我有一些很好的代码：

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'); 

Answer 1

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

查看有关创作插件的jQuery文档以获取更多信息。

Answer 2

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

 $.fn.displayVals = function() { // Function stuff goes here }); $('#element').displayVals() 

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

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

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

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

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

  item 1 item 2 item 3  
 

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