Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 15.08.2016, 14:29
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от Stay_Strong
А вот в дата-аттрибуты вставляю значения цен.
И где эта вставлялка? Или ты хранишь скидки прямо в этом спане? Конечно нет. Следовательно перепиши вставлялку спана с дата- на вставляку нормального объекта. Блин, ну можешь json в любой один дата- атрибут вставить. data- - это собственно json и есть.
Ответить с цитированием
  #12 (permalink)  
Старый 15.08.2016, 14:31
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от Stay_Strong
data-price='790,765,740,700,680'

Это просто какое-то наваждение, что от читателя никогда нельзя добиться ответа, откуда он вообще данные берет. Как будто они божественным откровением возникают в спане.

В этом modX где-то же хранится запись о скидках на данный товар? Или откуда все-таки генерится этот чудовищный span?
Ответить с цитированием
  #13 (permalink)  
Старый 15.08.2016, 14:34
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от Stay_Strong
но пока не знаю, как реализовать.
Если в любом шаблоне своего модИкса ты сделаешь вот так

<script>var GLOBAL_VARIABLE='this is global variable';</script>

то после этих вот тегов в памяти браузера запечатлиться GLOBAL_VARIABLE со значением 'this is global variable'. Если тебе не нравится постить глобально, пости в объект, в функцию, в библиотеку - куда угодно.

Самое смешное, что например на том же php можно отпостить объект как таковой и в жаба-скрипте окажутся все его публичные проперти в json. То есть берешь echo json_encode($SomeObject); и больше ничего делать не надо.
Ответить с цитированием
  #14 (permalink)  
Старый 15.08.2016, 14:39
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Я кажется понял, они подключают скрипты как файлы, то есть он не может понять, как в скрипт, который вообще лежит отдельным файлом и подцепляется через src запихать данные о скидках на конкретный товар. )))

Да забей на все эти заморочки 90-х. Давным давно уже пишут когда надо <script> и где хочешь <style>.

У тебя этот забитый датой спан обрабатывается не раньше чем загрузится, так? Ну вот, следовательно если вместо него, прямо на то же месте вывести объект в тегах script, то этот объект будет доступен точно так же как спан, только искать его и парсить уже не надо.

ЗЫ Это еще цветочки, я видел в атрибутах пишут вроде data-run="{Foo(bar).baz()}"

Последний раз редактировалось warren buffet, 15.08.2016 в 14:45.
Ответить с цитированием
  #15 (permalink)  
Старый 15.08.2016, 16:29
Аватар для Stay_Strong
Аспирант
Отправить личное сообщение для Stay_Strong Посмотреть профиль Найти все сообщения от Stay_Strong
 
Регистрация: 14.10.2015
Сообщений: 37

Сделал в конечном счет вот так:
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">&ndash;</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;
 });
/*Окончание секции "Переключение количества товаров и цены"*/

Последний раз редактировалось Stay_Strong, 15.08.2016 в 16:31.
Ответить с цитированием
  #16 (permalink)  
Старый 15.08.2016, 16:56
Аватар для Stay_Strong
Аспирант
Отправить личное сообщение для Stay_Strong Посмотреть профиль Найти все сообщения от Stay_Strong
 
Регистрация: 14.10.2015
Сообщений: 37

Еще бы не помешало объединить вот этот кусок в один, с выполнением проверки:
$('.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()
  });

Здесь есть общие куски! И необходимо бы их в одно, но нужна проверка на то, на какой селектор произошло нажатие!
Как осуществить, подскажите пожалуйста?
Ответить с цитированием
  #17 (permalink)  
Старый 15.08.2016, 17:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от Stay_Strong
И необходимо бы их в одно, но нужна проверка на то, на какой селектор произошло нажатие!
вам дали пример, что мешает его использовать?
Ответить с цитированием
  #18 (permalink)  
Старый 15.08.2016, 17:17
Аватар для Stay_Strong
Аспирант
Отправить личное сообщение для Stay_Strong Посмотреть профиль Найти все сообщения от Stay_Strong
 
Регистрация: 14.10.2015
Сообщений: 37

Спасибо всем за ответы.
Ответить с цитированием
  #19 (permalink)  
Старый 15.08.2016, 17:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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">&ndash;</span>
<input class="count" type="text" value="1">
<span class="plus">+</span>
</div>

</body>
</html>
Ответить с цитированием
  #20 (permalink)  
Старый 15.08.2016, 17:59
Аватар для Stay_Strong
Аспирант
Отправить личное сообщение для Stay_Strong Посмотреть профиль Найти все сообщения от Stay_Strong
 
Регистрация: 14.10.2015
Сообщений: 37

Сообщение от рони Посмотреть сообщение
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">&ndash;</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
А здесь все отлично! Однако, спасибо! Это очень круто.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Преобразовать код JQUERY в JS nattt Общие вопросы Javascript 2 30.04.2014 08:01
Как оптимизировать этот код, чтоб не повторяться?(JS, jQuery, HTML) Blondinka Элементы интерфейса 2 22.03.2014 12:59
Код Popup, помогите разобраться Azmir Javascript под браузер 3 21.10.2013 12:31
Не работает jquery код на сайте Gvozdb jQuery 1 20.03.2013 11:57
Помогите код оптимизировать. Suharik Events/DOM/Window 2 27.05.2010 11:59