Помогите оптимизировать jquery-код

[Stay_Strong]

Всем доброго времени суток. Суть такова. Я очень начинающий. Пишу изменение цены при нажатии на "плюс", "минус" и изменении значения мышью в инпуте. В результате написал рабочий код, в котором каждый раз завожу переменные одни и те же. Вот код целиком, без кнопки "минус":

//Изменение цены при нажатии на "плюс"
  $('.plus').click(function () {
      var input = $(this).parent().find('input');
      var priceValOne = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val').attr('data-price_1_20');
      var priceValTwo = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val').attr('data-price_20_50');
      var priceValThree = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val').attr('data-price_50_100');
      var priceValFour = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val').attr('data-price_100_500');
      var priceValFive = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val').attr('data-price_500_1000');
      var priceValSix = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val').attr('data-price_more_1000');
      var price = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val');
      input.val(parseInt(input.val()) + 1); //увеличиваем значение input на 1
      var newInput = input.val(); //Забираем увеличенное значение
      //Вывод цены в зависимости от количества товара
        if (newInput < 20) {
          price.text(parseInt(newInput) * parseInt(priceValOne));
        };
        if (newInput >= 20 && newInput < 50) {
          price.text(parseInt(newInput) * parseInt(priceValTwo));
        };
        if (newInput >= 50 && newInput < 100) {
          price.text(parseInt(newInput) * parseInt(priceValThree));
        };
        if (newInput >= 100 && newInput < 500) {
          price.text(parseInt(newInput) * parseInt(priceValFour));
        };
        if (newInput >= 500 && newInput < 1000) {
          price.text(parseInt(newInput) * parseInt(priceValFive));
        };
        if (newInput >= 1000) {
          price.text(parseInt(newInput) * parseInt(priceValSix));
        };
      //окончание секции "Вывод цены в зависимости от количества товара""
      return false;
  });
 //Отслеживаем изменение инпута при помощи мыши, и меняем цену
 $('.number input').change(function(){
 	var inputVal = $(this).val();
  var priceValOne = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val').attr('data-price_1_20');
  var priceValTwo = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val').attr('data-price_20_50');
  var priceValThree = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val').attr('data-price_50_100');
  var priceValFour = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val').attr('data-price_100_500');
  var priceValFive = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val').attr('data-price_500_1000');
  var priceValSix = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val').attr('data-price_more_1000');
 	var price = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val');
  if (inputVal < 20) {
 	  price.text(inputVal * parseInt(priceValOne));
  };
   if (inputVal >= 20 && inputVal < 50) {
    price.text(inputVal * parseInt(priceValTwo));
  };
  if (inputVal >= 50 && inputVal < 100) {
    price.text(inputVal * parseInt(priceValThree));
  };
  if (inputVal >= 100 && inputVal < 500) {
    price.text(inputVal * parseInt(priceValFour));
  };
  if (inputVal >= 500 && inputVal < 1000) {
    price.text(inputVal * parseInt(priceValFive));
  };
  if (inputVal >= 1000) {
    price.text(inputVal * parseInt(priceValSix));
  };
 });

Вот это все нужно как-то максимально оптимизировать. Я не прошу, дублировать или писать за меня. Если можно, то подойдет даже ссылка на информацию, как правильно оптимизировать код. Или совсем маленький кусочек отсюда оптимизировать и дать пару комментариев. Пожалуйста, отзовитесь люди добрые..

[warren buffet]

У тебя не найдется мужества выкинуть всю эту выстраданную тряхомудию. Если считаешь иначе, пости сюда сперва свой html, то есть кусок, который варится в этой каше.

[Stay_Strong]

У тебя не найдется мужества выкинуть всю эту выстраданную тряхомудию. Если считаешь иначе, пости сюда сперва свой html, то есть кусок, который варится в этой каше.

<div class="product-cart__price">Цена: 
<span class="price-val" data-price_1_20="890" data-price_20_50="821" data-price_50_100="751" data-price_100_500="709" data-price_500_1000="695" data-price_more_1000="688">890</span>
<span class="ruble"> руб.</span>
</div>
<div class="product-cart__number number">
<span class="minus">–</span>
  <input class="count" type="text" value="1">
<span class="plus">+</span>
</div>

Мужества найдется, если подскажете, как грамотно это переписать, чтобы было как нужно

[warren buffet]

У тебя разнообразие заложено в слитых атрибутах вроде data-price_1_20="тут цена за от 1 до 20". А надо разделять, поскольку количество идет неразрывно, то есть у тебя не может быть "дырок" вроде от 25 до 50 по 3р, а от 55 до 100 по 2р. А от 50 до 55 - ? Понимаешь? То есть всегда нужна одна штука количества, а диапазон определяется в логике сравнения, например.

data-qty="20" data-price="3000"
data-qty="50" data-price="2500"
data-qty="100" data-price="2000"

Из таких атрибутов можно сделать объект и метод к нему:

var discounts={
   200:2000, /* цена за 200 и больше штук */
   100:2500,  /* цена за 100-199 штук */
    50:3000,  /* цена за 50-99 штук */
     1:3500  /* цена за 1-49 штук */
};

function get_price(value){
    for(var qty in discounts)
       if(value>=qty)
         return discounts[qty];
}

[Stay_Strong]

У тебя разнообразие заложено в слитых атрибутах вроде data-price_1_20="тут цена за от 1 до 20". А надо разделять, поскольку количество идет неразрывно, то есть у тебя не может быть "дырок" вроде от 25 до 50 по 3р, а от 55 до 100 по 2р. А от 50 до 55 - ? Понимаешь? То есть всегда нужна одна штука количества, а диапазон определяется в логике сравнения, например.

data-qty="20" data-price="3000"
data-qty="50" data-price="2500"
data-qty="100" data-price="2000"

Из таких атрибутов можно сделать объект и метод к нему:

Код:

var discounts={ 200:2000, /* цена за 200 и больше штук */ 100:2500, /* цена за 100-199 штук */ 50:3000, /* цена за 50-99 штук */ 1:3500 /* цена за 1-49 штук */ }; function get_price(value){ for(var qty in discounts) if(value>=qty) return discounts[qty]; }

Вообще пробелов, конечно у меня нет. У меня ж там по коду и по дат-аттрибутам видно. Вы предлагаете вот это все навесить на один span?

"
data-qty="20" data-price="3000"
data-qty="50" data-price="2500"
data-qty="100" data-price="2000"
"

[warren buffet]

А, вот оно чо.

<span class="price-val" data-price_1_20="890" data-price_20_50="821" data-price_50_100="751" data-price_100_500="709" data-price_500_1000="695" data-price_more_1000="688">890</span>

А зачем в спан? Отпости как объект и не придется его создавать из хтмля. Я не знаю какой у тебя на сервере скриптовый язык, допустим php

$discounts=array(
   200=>2000,
   100=>2500,
     50=>3000,
     1=>3500
);

/* И где-то скрипты выводятся, или в функцию, или там прямо вместо спана того */

echo '<script>var dicsounts='.json_encode($discounts).';</script>';

[warren buffet]

Вообще пробелов, конечно у меня нет.

Их и быть не может, поэтому и нужно всего одно значение.

Причем если вот так data-price_20_50="821" data-price_50_100="751" то скажим мне определенно, 50 это за 821 или за 751?

[рони]

Stay_Strong,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    $(".product-cart__price").each(function(indx, el) {
        var pr = $(".price-val", el);
        var data = pr.data();
        var next = $(el).next(".product-cart__number");
        var count = $(".count", next)[0];
        var num = +count.value;
        next.on("click", ".minus, .plus", function() {
            num += $(this).is(".minus") ? -1 : 1;
            num < 0 && (num = 0);
            count.value = num;
            var price = data.price_1_20;
            if (num >= 20) price = data.price_20_50;
            if (num >= 50) price = data.price_50_100;
            if (num >= 100) price = data.price_100_500;
            if (num >= 500) price = data.price_500_1000;
            if (num >= 1000) price = data.price_more_1000;
            pr.text(num * price)
        })
    })
});
  </script>
</head>

<body>
<div class="product-cart__price">Цена:
<span class="price-val" data-price_1_20="890" data-price_20_50="821" data-price_50_100="751" data-price_100_500="709" data-price_500_1000="695" data-price_more_1000="688">890</span>
<span class="ruble"> руб.</span>
</div>
<div class="product-cart__number number">
<span class="minus">–</span>
  <input class="count" type="text" value="1">
<span class="plus">+</span>
</div>
</body>
</html>

[Stay_Strong]

$discounts=array(
   200=>2000,
   100=>2500,
     50=>3000,
     1=>3500
);

/* И где-то скрипты выводятся, или в функцию, или там прямо вместо спана того */

echo '<script>var dicsounts='.json_encode($discounts).';</script>';

Сорри, с php вообще не дружу. Поэтому нужно добиться средством js. Тренирую на modX, где каждая цена заводится отдельным дополнительным полем, которое редактируется из админки. Товаров может быть несколько сотен. А вот в дата-аттрибуты вставляю значения цен. Идея с объектом хорошая у вас, но пока не знаю, как реализовать.

[Stay_Strong]

В общем думаю заводить один со всеми ценами

data-price='790,765,740,700,680'

Потом это брать, как объект, как-то распарсивать (не знаю как), и в зависимости от количества брать нужное число, умножать и подставлять. Как это сделать, пока что не знаю.