Как менять цены в зависимости от количества товара в таблице?

266
16 июня 2018, 04:30

Помогите решить проблему, т.к. я ещё новичок в js и jquery. У меня есть таблица с товаром. В этой таблице можно будет менять количество товара. Рядом должна меняться цена. Проблема в том, что мне необходимо, чтобы цена менялась только в нужной мне строке, не могу добиться этого. Код прикладываю:

Ниже приведён пример на изменение количества товара: 

$(document).ready(function() { 
  $('.minus').click(function() { 
    var $input = $(this).parent().find('input'); 
    var count = parseInt($input.val()) - 1; 
    count = count < 1 ? 1 : count; 
    $input.val(count); 
    $input.change(); 
    return false; 
  }); 
  $('.plus').click(function(op) { 
    var $input = $(this).parent().find('input'); 
    $input.val(parseInt($input.val()) + 1); 
    $input.change(); 
    return false; 
  }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table align="center"> 
  <tbody> 
    <th>наименование</th> 
    <th>количество</th> 
    <th>цена</th> 
    <tr> 
      <td>Товар первый</td> 
      <td> 
        <span class="minus">-</span> 
        <input type="text" size="3" id="QUANTITY_INPUT" name="QUANTITY_INPUT" min="0" step="0" oninput="set_quant();" max="0" value="1" /> 
        <span class="plus">+</span> 
      </td> 
      <td><span id="count_price"> 0 </span><span> руб.</span></td> 
    </tr> 
    <tr> 
      <td>Товар второй</td> 
      <td> 
        <span class="minus">-</span> 
        <input type="text" size="3" id="QUANTITY_INPUT" name="QUANTITY_INPUT" min="0" step="0" oninput="set_quant();" max="0" value="1" /> 
        <span class="plus">+</span> 
      </td> 
      <td><span id="count_price"> 0 </span><span> руб.</span></td> 
    </tr> 
  </tbody> 
</table>

Свой код на изменение цены пока не выкладываю, т.к. у меня неправильно меняется (либо в одном месте, либо не в том). Цена должна меняться в той строке, где изменено количество, т.е. в строке <span> с id="count_price"

Помогите, пожалуйста, новичку.

Answer 1

Вот один из способов менять цену при изменении количества.

$(document).ready(function() { 
  function change($tr, val) { 
    var $input = $tr.find('.quantity'); 
    var count = parseInt($input.val()) + val; 
    count = count < 1 ? 1 : count; 
    $input.val(count); 
    var $price = $tr.find('.count_price'); 
    $price.text(count * $price.data('price')); 
  } 
  $('.minus').click(function() { 
    change($(this).closest('tr'), -1); 
  }); 
  $('.plus').click(function() { 
    change($(this).closest('tr'), 1); 
  }); 
  $('.quantity').on("input", function() { 
    var $price = $(this).closest('tr').find('.count_price'); 
    $price.text(this.value * $price.data('price')); 
  }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table align="center"> 
  <tbody> 
    <tr> 
      <th>наименование</th> 
      <th>количество</th> 
      <th>цена</th> 
    </tr> 
    <tr> 
      <td>Товар первый</td> 
      <td> 
        <span class="minus">-</span> 
        <input class="quantity" type="text" size="3" min="0" step="0" max="0" value="1" /> 
        <span class="plus">+</span> 
      </td> 
      <td><span class="count_price" data-price="250"> 250 </span><span> руб.</span></td> 
    </tr> 
    <tr> 
      <td>Товар второй</td> 
      <td> 
        <span class="minus">-</span> 
        <input class="quantity" type="text" size="3" min="0" step="0" max="0" value="1" /> 
        <span class="plus">+</span> 
      </td> 
      <td><span class="count_price" data-price="100"> 100 </span><span> руб.</span></td> 
    </tr> 
  </tbody> 
</table>

READ ALSO
VUE.JS связка не работает
javascript

VUE.JS связка не работает

Не понимаю почему не работает vuejs

 258
Почему после обновления initialize Facebook не отображаются кнопки &#171;нравится&#187; и &#171;поделиться&#187;?
javascript

Почему после обновления initialize Facebook не отображаются кнопки «нравится» и «поделиться»?

В методе ngOnInit() следующий код:

 276
Извлечение данных localStorage
javascript

Извлечение данных localStorage

Есть форма, данные которой записываются в массив contacts, потом функция updateTable берет данные из массива и заполняет/рисует таблицуНеобходимо...

 299
Как условно отобразить header внутри jsf?
javascript

Как условно отобразить header внутри jsf?

У меня есть jsf страница, Требуется, чтобы в зависимости от переданного в реквесте параметра, например это GET с параметром в url hide, чтобы: Если...

 258