JQuery Selector: как я могу указать одно меню выбора, когда у меня более одного? - PullRequest
Новая
       3

JQuery Selector: как я могу указать одно меню выбора, когда у меня более одного?

4 голосов
/ 13 октября 2011

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

Ответы [ 2 ]

9 голосов
/ 13 октября 2011

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

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

Удобный прием - использовать атрибуты "data", чтобы связать что-то подобное <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'));

  // ...
});
1 голос
/ 13 октября 2011 
$(".product").change(function(event){
  $(this).closest(".section").find(".quantity").val("somevalue");
  $(this).closest(".section").find(".price").val("somevalue");
});
...