如何在jQuery中創建「可重用」函數？

我有此位的代碼的偉大工程：如何在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');

來源

2011-11-24 I_miss_Steve_already

像這個，如果你想讓它一個jQuery函數：

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

$('#element').displayVals()

在函數內部，$(this)作品就像你指望它。只要在docReady之外定義這個，你就全部設置好了。話雖如此，它看起來像你只需要在displayVals定義選擇（）調用.change事件的內部：

比

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

其他，我有看到你的代碼的其餘部分了解可能導致問題的原因。

來源

2011-11-24 01:16:14 jblock

你不應該在jQuery函數中使用'$（this）'，'this'已經是一個擴展對象。 – Ryan

Whoopsie。你是對的:)無論如何，克里斯富爾斯托的答案要好得多。 – jblock

他也使用'$（this）':) – Ryan

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

$("select").displayVals();

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

來源

2011-11-24 01:23:05

'this'會正常工作 - 不需要使用'$（this）'。 – Ryan

@minitech ta，已更新 –

我可能會做這樣的事情：

(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風格「數據 - 」屬性。這也意味着您不必在文檔加載事件中設置每個單獨的下拉菜單，每個select都可以在html中指定自己的顯示元素。

來源

2011-11-24 01:40:58 obliojoe

感謝您的輸入。我進入了項目的另一部分，但尚未能夠嘗試這些建議，但我很快就會完成，然後再報告。 g） –

如何在jQuery中創建「可重用」函數？

回答

相關問題