Question

我有一些很好的代码：

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 docs on authoring plugins了解详情。

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

然后，在任何你想要它的选择元素上，你可以做类似::

的事情

<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-”属性。这也意味着您不必在文档加载事件中设置每个单独的下拉列表，每个select都可以在html中指定自己的display元素。

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

3 个答案: