Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 29.05.2017, 13:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Pantela,
не знаю что вы хотите сделать, но c в строке 3 всегда true, это обьект с данными.
лучше ориентироватся на класс и тогда
var f = $(".report", e); //инпут в блоке
    if(f.length){ //если точно есть инпут с таким классом
    var c = f.data(); //все дата из этого инпут
     //...
     }
Ответить с цитированием
  #22 (permalink)  
Старый 30.05.2017, 20:53
Аспирант
Отправить личное сообщение для Pantela Посмотреть профиль Найти все сообщения от Pantela
 
Регистрация: 25.05.2017
Сообщений: 31

спс. большой, вот только баг один...
Думаю как заглушку прописать...
Если очень быстро нажимать на checkbox, иногда выводиться результат с 0 значением http://prntscr.com/fdwxs7 Часто встречал такую проблему у себя...
Ответить с цитированием
  #23 (permalink)  
Старый 30.05.2017, 21:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Pantela,
добавьте stop в анимацию
$(d[0]).stop().fadeOut(300, function() {
            $(d[1]).stop().fadeIn(300)
        });
Ответить с цитированием
  #24 (permalink)  
Старый 06.07.2017, 23:02
Аспирант
Отправить личное сообщение для Pantela Посмотреть профиль Найти все сообщения от Pantela
 
Регистрация: 25.05.2017
Сообщений: 31

В форме создал поле
<input type="hidden" name="cities" value="" />
как через запятую записать те значение стран которые выбераю...

т.е. должно быть напр.
<input type="hidden" name="cities" value="russia,usa" />


спс.Ув.
Ответить с цитированием
  #25 (permalink)  
Старый 06.07.2017, 23:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Pantela,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .row.sale .reportPrice{
    text-decoration:line-through;
    color:#dd5a43;
    font-weight: normal;
  }

  .row.sale .reportPriceDiscount,.reportPrice{
    color:#69aa46;
    font-weight: bold;
  }

  .reportPriceDiscount{
    color:#ccc;
  }

  .row.ok.sale .reportPriceDiscount:after,.row.ok .reportPrice:after{
    content:"✓";
    margin-left:5px;
    font-size:12px;
    font-weight:bold;
  }

  .row.ok.sale .reportPrice:after{
    content:"";
  }

  #finalPriceBlock{
    display:none;
    font-weight:700;
    font-size:18px;
  }

  #orderCalcBalanceBlockAlert{
    display:none;
  }
  #finalPrice{
     color:hsla(120,100%,25%,1);
  }

  #finalPrice.red {
    color:hsla(0,100%,50%,1);
  }
  #allPrice{
     color: hsla(240, 100%, 50%, 1);
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $(".row .report").on("change", function() {
        var a = 0, //общая сумма
            b = +$("#balance").val() || 0,//балланс
            k = 0,//сумма без скидки
            country = [];
        $(".row").each(function(d, e) {
            var f = $(".report", e), //инпут  в блоке
                c = f.data(), //все дата из этого инпут
                b = c.discountwith.split(",")[c.discountrule](function(a) {
                    return $(".row [name='" + a + "']").is(":checked")
                }); //скидка (true/false) -- не путать  с баллансом
            $(e).toggleClass("sale", b);//установка-удаление класса блок со скидкой
            $(e).toggleClass("ok", f[0].checked);// установка-удаление класса блок выбран
            a += f[0].checked ? b ? +c.pricediscount : +c.price : 0; //подсчёт суммы с текущими скидками
            //если чекед плюсуем к общей сумме цену инпут со скидкой (b=true, c.pricediscount) или без (b=false, c.price)
            f[0].checked && (k += +c.price,country.push(f[0].name) ); //подсчёт суммы без скидок , добавление страны
        });
        //вывод сумм и блоков предуреждения
        $("#finalPrice").text(a).css("opacity", 0).fadeTo(900, 1).toggleClass("red",a > b);
        $("#allPrice").text(k);
        var d = ["#finalPriceBlock", "#orderBlockAlert"];
        a && d.reverse();
         $(d[0]).stop().fadeOut(300, function() {
            $(d[1]).stop().fadeIn(300)
        });
        $("#orderCalcBalanceBlockAlert")[a > b ? "fadeIn" : "fadeOut"]();

        $("[name='cities']").val(country); //вывод выбранных стран
    }).eq(0).change()
});
  </script>
</head>

<body>
<div id="usa" class="row">
  <div class="reportPrice">5 USD</div>
  <div class="reportPriceDiscount"><span>4 USD</span></div>
  Usa <input type="checkbox" name="usa" class="report" data-price="5" data-pricediscount="4" data-discountrule="some" data-discountwith="russia"/>
</div>

<br/ >

<div id="russia" class="row">
  <div class="reportPrice">7 USD</div>
  <div class="reportPriceDiscount"><span>5 USD</span></div>
  Russia <input type="checkbox" name="russia" class="report" data-price="7" data-pricediscount="5" data-discountrule="some" data-discountwith="usa"/>
</div>

<br/ >

<div id="spane" class="row">
  <div class="reportPrice">12 USD</div>
  <div class="reportPriceDiscount"><span>9 USD</span></div>
  Spane <input type="checkbox" name="spane" class="report" data-price="12" data-pricediscount="9" data-discountrule="every" data-discountwith="usa,russia"/>
</div>

<br/ >

<div id="japan" class="row">
  <div class="reportPrice">7 USD</div>
  <div class="reportPriceDiscount"><span>5 USD</span></div>
  Japan <input type="checkbox" name="japan" class="report" data-price="7" data-pricediscount="5" data-discountrule="some" data-discountwith="china,korea"/>
</div>

<br/ >

<div id="china" class="row">
  <div class="reportPrice">9 USD</div>
  <div class="reportPriceDiscount"><span>3 USD</span></div>
  China <input type="checkbox" name="china" class="report" data-price="9" data-pricediscount="3" data-discountrule="some" data-discountwith="japan,korea"/>
</div>

<br/ >

<div id="korea" class="row">
  <div class="reportPrice">8 USD</div>
  <div class="reportPriceDiscount"><span>4 USD</span></div>
  Korea <input type="checkbox" name="korea" class="report" data-price="8" data-pricediscount="4" data-discountrule="some" data-discountwith="japan,china"/>
</div>

<br/ >


<!-- Final price -->
<div id="finalPriceBlock">
  <div class="col-md-12 center">
    <div class="form-group">
      Total price: <span id="finalPrice"></span> USD
    </div>
    <div class="form-group">
      All price: <span id="allPrice"></span> USD
    </div>

  </div>
</div>
<!-- Final price -->

<!-- Alert -->
<div class="col-md-6 col-md-offset-3 col-xs-12">
  <div class="form-group" id="orderBlockAlert">
    Status: Warning
  </div>
  <div class="form-group" id="orderCalcBalanceBlockAlert">
    Status: Danger
  </div>
</div>
<!-- Alert -->

<br/ ><br/ >

Balance: <input name="balance"  id="balance" type="text" value="15" />

<input type="text" name="cities" value="" />

</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
нужна форма оптового заказа с калькулятором Dariloff Работа 1 06.01.2013 15:31