отфильтровать, какой интервал для обновления

Question

У меня есть следующая коллекция div в моем HTML. Он предназначен для динамической репликации в соответствии с пользовательским взаимодействием.

<div class="bill-item"> 
<!-- Section for a single item --> 
<div class="bill-item-img"> 
<!-- Section for Item pic --> 
</div> 
<div class="bill-item-description"> 
<!-- Section for Item description and pricing --> 
<div class="bill-item-name"> 
<p class="bill-item-name-left">Normal Cofee</p><p class="bill-item-name-right">170.00</p> 
<div class="clear"></div> 
</div> 
<div class="bill-item-price"> 
<span>170.00 USD</span> 
</div> 
    <div class="bill-item-amount"> 
<span>2</span> 
</div> 
</div> 
<div class="bill-amount-selection"> 
<!-- Section where the increment & decrement of item amount goes --> 
<a class="amount-increase" href="#"></a> 
<a class="amount-decrease" href="#"></a> 
</div> 
</div> 

Это HTML-изображение элементов.

Я написал следующий сценарий, чтобы увеличить значение интервала счета-элемент-сумма.

$(".amount-increase").click(function(){ 
      x+=1; 
      $(".bill-item-amount span").html(x); 
     }); 

     $(".amount-decrease").click(function(){ 
      if(!x<=0){ 
       x-=1; 
       $(".bill-item-amount span").html(x); 
      } 
     }); 

Это прекрасно работает, но обновляет значение как элементов span. я хочу, чтобы поймать событие щелкнутого элемента (что я делаю сейчас) и увеличить значение диапазона соответствующего диапазона. Как я могу отфильтровать, какой диапазон для обновления с помощью javascript?

Answer 1

Вы должны ходить по дереву DOM от щелкнутого элемента, пока вы не достигнете .bill-item элемента и идти вниз к .bill-item-amount span узлу

$(".amount-increase").click(function(){ 
    var $span = $(this).parent().parent().find(".bill-item-amount span"); 
    var x = $span.html(); 
    x+=1; 
    $span.html(x); 
}); 

$(".amount-decrease").click(function(){ 
    var $span = $(this).parent().parent().find(".bill-item-amount span"); 
    var x = $span.html(); 
    if(!x<=0){ 
     x-=1; 
     $span.html(x); 
    } 
}); 

Answer 2

Что-то вроде $(this).parents('.bill-item').find('.bill-item-amount span') должно выбрать правильный элемент.
Внутри вашего обратного вызова this присваивается eventSource.

Answer 3

Привет ДимАл обновить код:

$(".amount-increase").click(function(){ 
     x+=1; 
     $(".bill-item-amount").html(x); 
    }); 

    $(".amount-decrease").click(function(){ 
     if(!x<=0){ 
      x-=1; 
      $(".bill-item-amount").html(x); 
     } 
    }); 

Dont добавить промежуток внутри переключателя [он изменяет целые значения пролетных]

Answer 4

$(".amount-increase").click(function(){ 
     x+=1; 
     $("use ur increase span id here").html(x); // 
    }); 

    $(".amount-decrease").click(function(){ 
     if(!x<=0){ 
      x-=1; 
      $("use ur decrease span id here").html(x); 
     } 
    }); 

Answer 5

Внутри каждой функции селектор $(".bill-item-amount span") найдет все <span> суммы в документ. Вы можете пройти DOM, чтобы найти правильный <span> с помощью jQuery или простого JavaScript. Кажется, вы используете функции jQuery, поэтому в моем ответе также используется jQuery.

Следующий код объединяет два действия в одну функцию, которая увеличивает или уменьшает количество, основанное на имени класса <a>. Я также добавил return false, так что браузер не будет следовать за href = "#" на якоре.

$('.bill-amount-selection').on('click', 'a', function(){ 
    var change = this.className == 'amount-increase' ? 1 : -1 
    var $amount = $(this).closest('.bill-item').find('.bill-item-amount span') 
    var amount = parseInt($amount.html(), 10) + change 
    $amount.html(amount < 0 ? 0 : amount) 
    return false 
}); 

Применение .on() означает, что JQuery v1.7 + требуется. При необходимости я могу предоставить совместимую функцию с более низкими версиями jQuery.