Помогите оптимизировать jquery-код
Всем доброго времени суток. Суть такова. Я очень начинающий. Пишу изменение цены при нажатии на "плюс", "минус" и изменении значения мышью в инпуте. В результате написал рабочий код, в котором каждый раз завожу переменные одни и те же. Вот код целиком, без кнопки "минус":
//Изменение цены при нажатии на "плюс"
$('.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));
};
});
Вот это все нужно как-то максимально оптимизировать. Я не прошу, дублировать или писать за меня. Если можно, то подойдет даже ссылка на информацию, как правильно оптимизировать код. Или совсем маленький кусочек отсюда оптимизировать и дать пару комментариев. Пожалуйста, отзовитесь люди добрые.. |
У тебя не найдется мужества выкинуть всю эту выстраданную тряхомудию. Если считаешь иначе, пости сюда сперва свой 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> Мужества найдется, если подскажете, как грамотно это переписать, чтобы было как нужно |
У тебя разнообразие заложено в слитых атрибутах вроде 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" Из таких атрибутов можно сделать объект и метод к нему: Код:
|
Цитата:
" data-qty="20" data-price="3000" data-qty="50" data-price="2500" data-qty="100" data-price="2000" " |
А, вот оно чо.
Цитата:
$discounts=array(
200=>2000,
100=>2500,
50=>3000,
1=>3500
);
/* И где-то скрипты выводятся, или в функцию, или там прямо вместо спана того */
echo '<script>var dicsounts='.json_encode($discounts).';</script>';
|
Цитата:
Причем если вот так 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>
|
Цитата:
|
В общем думаю заводить один со всеми ценами
data-price='790,765,740,700,680' Потом это брать, как объект, как-то распарсивать (не знаю как), и в зависимости от количества брать нужное число, умножать и подставлять. Как это сделать, пока что не знаю. |
Цитата:
|
Цитата:
Это просто какое-то наваждение, что от читателя никогда нельзя добиться ответа, откуда он вообще данные берет. Как будто они божественным откровением возникают в спане. В этом modX где-то же хранится запись о скидках на данный товар? Или откуда все-таки генерится этот чудовищный span? |
Цитата:
<script>var GLOBAL_VARIABLE='this is global variable';</script> то после этих вот тегов в памяти браузера запечатлиться GLOBAL_VARIABLE со значением 'this is global variable'. Если тебе не нравится постить глобально, пости в объект, в функцию, в библиотеку - куда угодно. Самое смешное, что например на том же php можно отпостить объект как таковой и в жаба-скрипте окажутся все его публичные проперти в json. То есть берешь echo json_encode($SomeObject); и больше ничего делать не надо. |
Я кажется понял, они подключают скрипты как файлы, то есть он не может понять, как в скрипт, который вообще лежит отдельным файлом и подцепляется через src запихать данные о скидках на конкретный товар. )))
Да забей на все эти заморочки 90-х. Давным давно уже пишут когда надо <script> и где хочешь <style>. У тебя этот забитый датой спан обрабатывается не раньше чем загрузится, так? Ну вот, следовательно если вместо него, прямо на то же месте вывести объект в тегах script, то этот объект будет доступен точно так же как спан, только искать его и парсить уже не надо. ЗЫ Это еще цветочки, я видел в атрибутах пишут вроде data-run="{Foo(bar).baz()}" |
Сделал в конечном счет вот так:
HTML <div class="product-cart__price">Цена: <span class="price-val" data-price="890,821,751,709,695,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> JS
/*Переключение количества товаров и цены*/
function OutputPrices() {
var input = $('.count');
var price = $('.price-val');
var priceObject = $('.price-val').attr('data-price').split(','); //получаем все значения из data-prices и преобразуем их в массив
//Выводим цену в зависимости от количества
if (input.val() < 20) {
price.text(parseInt(input.val()) * priceObject[0]); //Количество менее 20
};
if (input.val() >= 20 && input.val() < 50) {
price.text(parseInt(input.val()) * priceObject[1]); //Количество в диапазоне от 20 до 50
};
if (input.val() >= 50 && input.val() < 100) {
price.text(parseInt(input.val()) * priceObject[2]); //Количество в диапазоне от 50 до 100
};
if (input.val() >= 100 && input.val() < 500) {
price.text(parseInt(input.val()) * priceObject[3]); //Количество в диапазоне от 100 до 500
};
if (input.val() >= 500 && input.val() < 1000) {
price.text(parseInt(input.val()) * priceObject[4]); //Количество в диапазоне от 500 до 1000
};
if (input.val() >= 1000) {
price.text(parseInt(input.val()) * priceObject[5]); //Количество более 1000
};
return false;
// Окончание секции "Выводим цену в зависимости от количества"
};
//Изменение цены при нажатии на "минус"
$('.minus').click(function () {
var input = $(this).parent().find('input');
var count = parseInt(input.val()) - 1;
count = count < 1 ? 1 : count;
input.val(count);
OutputPrices()
});
//Изменение цены при нажатии на "плюс"
$('.plus').click(function () {
var input = $(this).parent().find('input');
var price = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val');
input.val(parseInt(input.val()) + 1); //увеличиваем значение input на 1
OutputPrices()
});
//Отслеживаем изменение инпута при помощи мыши, и меняем цену
$('.number input').change(function(){
OutputPrices()
return false;
});
/*Окончание секции "Переключение количества товаров и цены"*/
|
Еще бы не помешало объединить вот этот кусок в один, с выполнением проверки:
$('.minus').click(function () {
var input = $(this).parent().find('input');
var count = parseInt(input.val()) - 1;
count = count < 1 ? 1 : count;
input.val(count);
OutputPrices()
});
//Изменение цены при нажатии на "плюс"
$('.plus').click(function () {
var input = $(this).parent().find('input');
var price = $(this).parents('.catalog-part__text, .product-cart__text').find('.price-val');
input.val(parseInt(input.val()) + 1); //увеличиваем значение input на 1
OutputPrices()
});
Здесь есть общие куски! И необходимо бы их в одно, но нужна проверка на то, на какой селектор произошло нажатие! Как осуществить, подскажите пожалуйста? |
Цитата:
|
Спасибо всем за ответы.
|
Stay_Strong,
в data добавлены скобки для упрощения
<!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("price");
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[0];
if (num >= 20) price = data[1];
if (num >= 50) price = data[2];
if (num >= 100) price = data[3];
if (num >= 500) price = data[4];
if (num >= 1000) price = data[5];
pr.text(num * price)
})
})
});
</script>
</head>
<body>
<div class="product-cart__price">Цена:
<span class="price-val" data-price="[890,821,751,709,695,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>
|
Цитата:
var num = +count.value; Uncaught TypeError: Cannot read property 'value' of undefined А здесь все отлично! Однако, спасибо! Это очень круто. |
Цитата:
|
Цитата:
<div class="product-cart__price">Цена: <span class="price-val" data-price="890,821,751,709,695,688">890</span> <div class="product-cart__note"> <span>В зависимости от количества цена может изменяться</span> </div> <div class="product-cart__number number"><span class="minus">–</span> <input class="count" type="text" value="1"><span class="plus">+</span> </div> <div class="product-cart__buy"> <span>Заказать</span></div> |
Stay_Strong,
если есть проблема, нужен полный html |
Цитата:
<div class="product-cart__price">Цена: <span class="price-val" data-price="890,821,751,709,695,688">890</span> <div class="product-cart__note"> <span>В зависимости от количества цена может изменяться</span> </div> <div class="product-cart__number number"><span class="minus">–</span> <input class="count" type="text" value="1"><span class="plus">+</span> </div> <div class="product-cart__buy"> <span>Заказать</span></div> Вот этот кусок кода не позволяет правильно взять count <div class="product-cart__note"> <span>В зависимости от количества цена может изменяться</span> </div> |
Цитата:
|
Stay_Strong,
var next = $(".product-cart__number",el);
|
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("price");
var next = $(".product-cart__number",el);
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[0];
if (num >= 20) price = data[1];
if (num >= 50) price = data[2];
if (num >= 100) price = data[3];
if (num >= 500) price = data[4];
if (num >= 1000) price = data[5];
pr.text(num * price)
})
})
});
</script>
</head>
<body>
<div class="product-cart__price">Цена:
<span class="price-val" data-price="[890,821,751,709,695,688]">890</span>
<div class="product-cart__note">
<span>В зависимости от количества цена может изменяться</span>
</div>
<div class="product-cart__number number"><span class="minus">–</span>
<input class="count" type="text" value="1"><span class="plus">+</span>
</div>
<div class="product-cart__buy"> <span>Заказать</span></div>
</div>
</body>
</html>
|
Цитата:
<div class="product-cart__price">Цена:
<span class="price-val" data-price="890,821,751,709,695,688">890</span>
<span class="ruble"> руб.</span></div>
<div class="product-cart__note">
<span>В зависимости от количества цена может изменяться</span>
</div>
<div class="product-cart__number number"><span class="minus">–</span>
<input class="count" type="text" value="1"><span class="plus">+</span>
</div>
<div class="product-cart__buy"> <span>Заказать</span></div>
|
Stay_Strong,
тогда
var next = $(".product-cart__number").eq(indx);
|
рони, вдумайся в что ты пишешь:
if (num >= 20) price = data[1]; if (num >= 50) price = data[2]; if (num >= 100) price = data[3]; if (num >= 500) price = data[4]; if (num >= 1000) price = data[5]; браузер, не вспотеет, конечно, но когда num у тебя 1000 или больше, то выполняются тотально все условия. То есть это не код, а хак. Ну и самая мякотка, что ТС ниасилил передачу данных без хтмля и уже сейчас накинул на себя удавку. Когда ему начальство скажет поменять скидки, на отдельно взятые или группы товаров, у него все волосы из носа вылезут от ужаса. И придется ему делать как дядя уоррен баффет прописал. ЗЫ Причем начальство само зависит от коньюктуры, попросту от конкурентов. Конкуренты нарисуют скидку за 150, ТС полезет в свою Модиксную админку, опа, а хрена-то количество не передается в скрипт. Попух. Один специалист хакает, второй хардкодит данные из БД, молодцы, чо, спелись. Но свободный рынок вас научит как свободу любить. |
warren buffet,
не осилил жаргона ... знаешь лучше, пиши код. |
Цитата:
|
Цитата:
|
Кроме того по обычной деловой практике в торговле ТС должен вывести цены за количество на страницу товара. Без вывода заманихи никакой не будет. Никакой дурак не станет сидеть, набирать циферки чтобы вычислить какую же они дают цену за сколько штук. Идиотизм какой-то.
Это учебный проект что ли или заказчик на самом деле такой тупой? |
| Часовой пояс GMT +3, время: 08:53. |