JQuery несколько плюс/минус скрипт

Question

У меня есть несколько форм на странице, а также несколько ящиков ввода с знаками плюс/минус.

У меня возникли проблемы с тем, чтобы эти окна ввода работали отдельно. Вероятно, из-за неправильных/одинаковых идентификаторов или чего-то подобного или, может быть, неправильной настройки моего кода. Дело в том, что я не могу найти свою ошибку в коде, и я не получаю никаких ошибок в моей консоли.

Что у меня есть:

 function quantity_change(way, id){ 

      quantity = $('#product_amount_'+id).val(); 
      if(way=='up'){ 
      quantity++; 
       } else { 
       quantity--; 
      } 
      if(quantity<1){ 
      quantity = 1; 
      } 
      if(quantity>10){ 
      quantity = 10; 
      } 
      $('#product_amount_'+id).val(quantity); 

     } 

И мой HTML:

//row 1 
<div class="amount"><input type="text" name="quantity" value="1" id="product_amount_1234"/></div> 
    <div class="change" data-id="1234"> 
    <a href="javascript:;" onclick="quantity_change('up');" title="+" class="up">+</a> 
    <a href="javascript:;" onclick="quantity_change('down');" title="-" class="down">-</a> 
</div> 

//row 2 
<div class="amount"><input type="text" name="quantity" value="1" id="product_amount_4321"/></div> 
    <div class="change" data-id="4321"> 
    <a href="javascript:;" onclick="quantity_change('up');" title="+" class="up">+</a> 
    <a href="javascript:;" onclick="quantity_change('down');" title="-" class="down">-</a> 
</div> 

Я думал, что-то вроде этого будет делать трюк, но он не :(

$(document).ready(function(){ 
      $('.change a').click(function(){ 
       var id = $(this).find('.change').data('id'); 
       quantity_change(id) 
      }); 
      }); 

Любой спасибо, что оценили!

Answer 1

Вы должны использовать метод closest(), чтобы получить доступ к родительскому div с классом change, после чего вы можете прочитать значение идентификатора атрибута данных.

var id = $(this).closest('.change').data('id'); 
alert(id); 

Поскольку вы уже связывает событие щелчка, используя unobutrusive JavaScript, вам не нужен onclick код в ваш HTML-разметки.

Также ваш метод quantity_change принимает 2 параметра и использует их оба, но вы передаете только один. Вы можете сохранить значение way в атрибутах данных HTML 5 в теге привязки и прочитать его и передать это вашему методу.

<div class="change" data-id="1234"> 
    <a href="#" data-way="up" title="+" class="up">+</a> 
    <a href="#" data-way="down" title="-" class="down">-</a> 
</div> 

Так исправленное JS код

$(document).ready(function(){ 

    $('.change a').click(function(e){ 
      e.preventDefault(); 
      var _this=$(this); 

      var id = _this.closest('.change').data('id'); 
      var way= _this.data("way"); 

      quantity_change(way,id) 
    }); 

}); 

Here является рабочим образцом.