如何将DOM对象的引用传递给jQuery函数？

Question

我想将DOM对象的引用传递给jQuery函数。但是，该函数不会获得对DOM对象的引用。它确实得到一个包含DOM对象的字符串。所以我在下面的例子中得到了一个错误

<input type="text" size="30" onchange="change_total_price(this)" id="priceField">

function change_total_price(input) {
    input.closest('div').find('#amountField').val());
}

Answer 1

你需要包装它，如下所示：

function change_total_price(input) {
  var val = $(input).closest('div').find('#amountField').val();
}

this，函数中的input是 DOM元素，但.closest()是 jQuery对象方法，所以你如果你想使用它，需要将它包装在$()中以获取jQuery对象。

或者在标记之外执行此操作，如下所示：

$(function() {
  $("#priceField").change(function() {
    var val = $(this).closest('div').find('#amountField').val();
  });
});

这种方式将change event处理程序绑定到id="preiceField"元素，您可以删除内联onchange="change_total_price(this)" ...它更清晰，更易于维护（可以在页面之外）例如，在外部.js加载并缓存一次。

另外，ID应该是唯一，所以它根本不需要是相对的，上面的两个例子都可以是：

var val = $('#amountField').val();