jQuery 选择器：当我有多个选择菜单时，如何指定一个选择菜单？

Question

我有 4 个精选菜单，全部都是相同的产品。 （用户应该使用选择菜单将产品添加到发票中）。

因此，每个部分都由一个选择菜单、一个数量文本字段和一个价格文本字段组成。但我在同一页上有四个。

每当我从选择菜单中选择产品时，我想更改数量和价格。但更具体地说，我只想知道如何找出单击了哪个选择菜单。

如果选择菜单有一类产品 (.product)，当我选择产品时，所有部分都会受到影响。但我只想影响特定的选择菜单部分。

$(".product").change(function(event){
  alert('product picked'); // testing
});

我不能只附加一个数字，如下所示：product1、product2、product3。因为然后在 javascript 文件中我必须编写 4 个不同的函数，

$(".product1").change(function(event){, 
$(".product2").change(function(event){, etc.

我知道这是非常基本的，但我需要刷新我的 jQuery 内容。

这是 HTML 的一些形式。为了简化起见，我仅包含产品选择菜单和数量文本字段。

<div class="item">
<p>
  Product: 
  <select class="product" id="invoice_line_items_attributes_0_item_id" name="invoice[line_items_attributes][0][item_id]"><option value="1" data-defaultquantity="1">WP setup</option>
  <option value="2" data-defaultquantity="1">WordPress Theme Design</option>
  <option value="3" data-defaultquantity="1">WHE/yr</option>
  <option value="4" data-defaultquantity="1">WHE/mo</option></select>
</p>

Qty: <input class="quantity" id="invoice_line_items_attributes_0_quantity" name="invoice[line_items_attributes][0][quantity]" size="30" type="text" value="1"><br>
</div><hr>

<div class="item">
<p>
  Product: 
  <select class="product" id="invoice_line_items_attributes_1_item_id" name="invoice[line_items_attributes][1][item_id]"><option value="1" data-defaultquantity="1">WP setup</option>
  <option value="2" data-defaultquantity="1">WordPress Theme Design</option>
  <option value="3" data-defaultquantity="1">WHE/yr</option>
  <option value="4" data-defaultquantity="1">WHE/mo</option></select>
</p>
Qty: <input class="quantity" id="invoice_line_items_attributes_1_quantity" name="invoice[line_items_attributes][1][quantity]" size="30" type="text" value="1"><br>
</div><hr>

Answer 1

在您的事件处理程序中，this 将绑定到相关的 元素。

$(".product").change(function(event){
  alert($(this).attr('name')); // name of <select> element changed
});

一个方便的技巧是使用“数据”属性将 之类的内容与其他字段相关联。也就是说，您可以执行类似将相关字段的“id”存储在数据属性中的操作，以便处理程序可以找到要处理的字段：

<select name='whatever' data-quantity-id="whatever" data-price-id="whatever">
  <option ... >
</select>

然后在处理程序中：

$('.product').change(function(event) {
  var $quantity = $('#' + $(this).data('quantityId'));
  var $price = $('#' + $(this).data('priceId'));

  // ...
});

Answer 2

$(".product").change(function(event){
  $(this).closest(".section").find(".quantity").val("somevalue");
  $(this).closest(".section").find(".price").val("somevalue");
});