Форум

alexmixaylov · #1 (**permalink**) 21.10.2014, 11:40

Пишу переключатель валют для сайта
Впал в ступор

- дальше не пойму как делать, подскажите пож что использовать
есть несколько блоков с ценой

<div class="wrap-price">
        <p class="price">1690</p>
        <p class="curency">
            <span class="jsCur usd">USD</span>
            <span class="jsCur eur">EUR</span>
            <span class="jsCur rub">RUB</span>
        </p>
    </div>
<div class="wrap-price">
        <p class="price">990</p>
        <p class="curency">
            <span class="jsCur usd">USD</span>
            <span class="jsCur eur">EUR</span>
            <span class="jsCur rub">RUB</span>
        </p>
    </div>

$(document).ready(function () {
    rate = 1; 
    //курсы валют
    var rubRates = 1;
    var usdRates = 40;
    var eurRates = 50; 
    $('span.jsCur.usd').addClass('active'); //ставлю валюту по умолчанию
    
    var basePrice = parseInt($('p.price').html()); //получаю базовую цену в блоке
    var activePrice = $('span.active').html(); //вычисляю какая валюта выбрана
    
        function calcRate() { //функция расчета множителя
        if (activePrice == 'USD') {
            rate = rubRates / usdRates;
        }
        if (activePrice == 'EUR') {
            rate = rubRates / eurRates;
        }
        //console.log(rate);
    }
    calcRate();

    //смена валюты по клику
    $("span.jsCur").click(function changeCur() {
        if ($(this).hasClass("usd")) {
            $("span.jsCur").removeClass("active");
            $('span.jsCur.usd').addClass("active");
        }
        if ($(this).hasClass("rub")) {
            $("span.jsCur").removeClass("active");
            $('span.jsCur.rub').addClass("active");
        }
        if ($(this).hasClass("eur")) {
            $("span.jsCur").removeClass("active");
            $('span.jsCur.eur').addClass("active");
        }

    });
    
    var wrapPrice = {
        price: basePrice,
        curPrice: basePrice * rate
    };

    console.log(wrapPrice.curPrice);
    console.log(rate);

});

нужно чтобы при клике на выбраную валюту (span.jsCur) пересчитывались все цены на страничке(p.price)

Знаю, что нужно как то в цикл обернуть , но не пойму Что совать туда, чтобы по клику все цены переписывались

ksa · #2 (**permalink**) 21.10.2014, 11:55

Сообщение от alexmixaylov

ужно чтобы при клике на выбраную валюту (span.jsCur) пересчитывались все цены на страничке(p.price)

Тогда непонятно почему так много "блоков" с выбором валюты...

Да и цифра у тебя только одна - типа итоговая...
По-мне так удобнее где-то хранить "базовую" цену (например в рублях), а итоговую вычислять "от базовой" и показывать.

alexmixaylov · #3 (**permalink**) 21.10.2014, 12:05

Сообщение от ksa

Тогда непонятно почему так много "блоков" с выбором валюты...

Нет традиционного переключателя, это не магазин
человек захотел, чтобы около каждой цены была валюта

Сообщение от ksa

По-мне так удобнее где-то хранить "базовую" цену (например в рублях), а итоговую вычислять "от базовой" и показывать.

Так и есть - рублевая цена базовая basePrice - она берется из p.price
ее нужно помножить на rate и получиться цена в нужной валюте

рони · #4 (**permalink**) 21.10.2014, 12:19

alexmixaylov,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .active {
    background: #FFCC00;
  }
 </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function() {
       var rates = {
           rub: 1,
           usd: 40,
           eur: 45
       };
       //смена валюты по клику
       var $span = $("span.jsCur"),
           $price = $('.price');
       $span.click(function() {
           $span.removeClass("active");
           var cur = $(this).data("cur");
           $span.filter('[data-cur="' + cur + '"]').addClass("active")
           $price.each(function(indx, element) {
               !$(this).data('price') && $(this).data('price', +$(this).text());
               $(this).text($(this).data('price') * rates[cur])
           });

       }).first().click();
   });  </script>
</head>

<body>
<div class="wrap-price">
        <p class="price">1690</p>
        <p class="curency">
            <span class="jsCur usd" data-cur="usd">USD</span>
            <span class="jsCur eur" data-cur="eur">EUR</span>
            <span class="jsCur rub" data-cur="rub">RUB</span>
        </p>
    </div>
<div class="wrap-price">
        <p class="price">990</p>
        <p class="curency">
            <span class="jsCur usd" data-cur="usd">USD</span>
            <span class="jsCur eur" data-cur="eur">EUR</span>
            <span class="jsCur rub" data-cur="rub">RUB</span>
        </p>
    </div>
</body>

</html>

ksa · #5 (**permalink**) 21.10.2014, 12:53

Сообщение от alexmixaylov

человек захотел, чтобы около каждой цены была валюта

Тогда зачем менять все цифры? Менять, в таком случае, нужно там, где изменили валюту...

Сообщение от alexmixaylov

Так и есть - рублевая цена базовая basePrice - она берется из p.price
ее нужно помножить на rate и получиться цена в нужной валюте

По-мне так фиговый подход...

alexmixaylov · #6 (**permalink**) 21.10.2014, 12:59

рони, Это реально круто

здесь нужно делить на курс получается а не отнимать, или переписать курсы
хочу округлить значение, дописываю в цикл .data('price') / rates[cur]).Math.round()
округляет норм, но выдает ошибку в отладчике

alexmixaylov · #7 (**permalink**) 21.10.2014, 13:02

Сообщение от ksa

Тогда зачем менять все цифры? Менять, в таком случае, нужно там, где изменили валюту...

Смотрел ролик про Берию и Сталина?
"Хочу иконки на рабочем столе....
Несмотря на советскую власть"
Это из той оперы примерно

рони · #8 (**permalink**) 21.10.2014, 13:10

Сообщение от alexmixaylov

.data('price') / rates[cur]).Math.round()

$(this).text(Math.round($(this).data('price') / rates[cur]))

Форум

Справочник

Discord чат

Курсы javascript