Блог

У меня есть 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>
  

В вашем обработчике событий this он будет привязан к соответствующему <select> элементу.

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

Удобный трюк заключается в использовании атрибутов «данные», чтобы связать что-то подобное <select> с другими полями. То есть вы можете сделать что-то вроде сохранения «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'));

  // ...
});
  

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