Цитата:
|
Цитата:
Это просто какое-то наваждение, что от читателя никогда нельзя добиться ответа, откуда он вообще данные берет. Как будто они божественным откровением возникают в спане. В этом 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 А здесь все отлично! Однако, спасибо! Это очень круто. |
| Часовой пояс GMT +3, время: 08:09. |