javascript 如何在 jquery 中创建“可重用”功能？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8251164/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a "reusable" function in jquery?
提问by I_miss_Steve_already
I have this bit of code that works great:
我有一段很好用的代码：
function displayVals() {
var phonevals = $("#bphonesel").val();
$('#bphone').val(phonevals);
}
$("select").change(displayVals);
displayVals();
I want to be able to reuse it for all the other select boxes I have on my site. So, I thought I'd use parameters to do it. However, I've so far been unable to get the syntax correct. Here's what I've got, but it doesn't work. Any help would be appreciated.
我希望能够将它重复用于我网站上的所有其他选择框。所以，我想我会使用参数来做到这一点。但是，到目前为止，我一直无法使语法正确。这是我所拥有的，但它不起作用。任何帮助，将不胜感激。
function displayVals(inputfld, boundfld) {
var nvenval = $(inputfld).val();
$(boundfld).val(nvenval);
}
$("select").change(displayVals());
displayVals('#bphonesel', '#bphone');
回答by Chris Fulstow
$.fn.displayVals = function(inputfld, boundfld) {
this.change(function() {
var nvenval = $(inputfld).val();
$(boundfld).val(nvenval);
}
}
$("select").displayVals();
Check out the jQuery docs on authoring pluginsfor more info.
查看有关创作插件的jQuery 文档以获取更多信息。
回答by jblock
Like this if you wanted to make it a jQuery function:
如果你想让它成为一个 jQuery 函数，就像这样：
$.fn.displayVals = function() {
// Function stuff goes here
});
$('#element').displayVals()
Inside the function, $(this)works just as you'd expect it to. Just define this outside the docReady and you're all set. Having said that, it looks like you just need to define the selectors in the displayVals() call inside of the .change event:
在函数内部，$(this)正如您所期望的那样工作。只需在 docReady 之外定义它就可以了。话虽如此，看起来您只需要在 .change 事件内的 displayVals() 调用中定义选择器：
$("select").change(displayVals('#bphonesel','#bphone'));
Other than that, I'd have to see the rest of your code to understand what might be causing a problem.
除此之外，我必须查看您的其余代码才能了解可能导致问题的原因。
回答by obliojoe
I might do something like:
我可能会做这样的事情：
(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();
});
Then, on any select element that you want this to work on, you can do something like::
然后，在您希望此操作的任何选择元素上，您可以执行以下操作：
<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>
This uses an html5 style "data-" attribute. This also means that you don't have to set up each individual dropdown in the document load event, each select can specify its own display element in html.
这使用了 html5 样式的“data-”属性。这也意味着您不必在文档加载事件中设置每个单独的下拉列表，每个选择都可以在 html 中指定自己的显示元素。
