Форум

drkrol · #1 (**permalink**) 27.08.2016, 04:11

Здравствуйте. Есть вот такой код https://jsfiddle.net/dfybvwoh/10/ . В начале через select задаётся цена товара товара, а потом через radio кнопки добавляется 2000 или цена остаётся прежней. Этот код рабочий, но мне он не подходит. В своём сайте я использую jquery form styler, и с помощью его я модифицирую внешний вид input'ов, а именно input type="radio". Загвоздка в том, что используя этот form styler можно выбрать один и тот же radio несколько раз. 1 раз нажал на radio - получил 500, еще раз нажал - получил 1000, и так далее. Помогите пожалуйста переделать код так, чтобы этого бага не было. То есть нажатие на radio не приводило к повторному прибавлению.

рони · #2 (**permalink**) 27.08.2016, 08:38

drkrol,
if ($( this ).val() == "notime" & time_plus == true)

рони · #3 (**permalink**) 27.08.2016, 08:41

drkrol,
опишите все комбинации вычисления цены

Strongman · #4 (**permalink**) 27.08.2016, 09:09

Где двойное срабатывание? Не вижу. У меня все нормально работает на jsfiddle.net.

рони · #5 (**permalink**) 27.08.2016, 09:19

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

Где двойное срабатывание?

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

В своём сайте я использую jquery form styler,

drkrol · #6 (**permalink**) 27.08.2016, 09:52

рони,
В начале через select, где 8 option (типы), а потом через радио кнопку. Больше ценообразования нет.

рони · #7 (**permalink**) 27.08.2016, 10:12

drkrol,
варианты цены это строки 22 - 29 ...

<!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>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.formstyler/1.7.6/jquery.formstyler.css">
  <script src="https://cdn.jsdelivr.net/jquery.formstyler/1.7.6/jquery.formstyler.min.js"></script>
  <script>
$(function() {
    var inp = $('input[name="time"]'),
        sel = $('select[name="type"]'),
        items = $().add(inp).add(sel),
        price = $(".price");
    items.styler().on("change", function() {
        var t = sel[0].selectedIndex,
            r = inp.index(inp.filter(":checked"));
        price.val({
            1: {
                0: 2500,
                1: 500
            },
            2: {
                0: 2800,
                1: 800
            }
        }[t][r] || 0)
    })
});
  </script>
</head>

<body>
   <select name="type" class="type">
     <option ></option>
     <option>Тип1</option>
     <option>Тип2</option>
   </select>
   <p></p>
   <label>
      <input type="radio" name="time" value="yestime" class="rrad">
      <div class="rtext">Трубы горят</div>
      </label>

      <label>
      <input type="radio" name="time" value="notime" class="rrad">
      <div class="rtext">Время есть</div>
      </label>

     <input type="text" class="price" value="0" readonly>

</body>
</html>

drkrol · #8 (**permalink**) 27.08.2016, 11:28

рони,
Извини, не хочу создавать новую тему. Ты бы не мог подсказать,как сделать так, чтобы после того, как будет выбран select и radio выполнялось действие:

$('.priceblock').removeClass('none');

?

рони · #9 (**permalink**) 27.08.2016, 11:44

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

Извини, не хочу создавать новую тему.

и ненужно плодить лишнее.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .none{
    display: none;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.formstyler/1.7.6/jquery.formstyler.css">
  <script src="https://cdn.jsdelivr.net/jquery.formstyler/1.7.6/jquery.formstyler.min.js"></script>
  <script>
$(function() {
    var inp = $('input[name="time"]'),
        sel = $('select[name="type"]'),
        items = $().add(inp).add(sel),
        price = $(".price"),
        block = $('.priceblock');
    items.styler().on("change", function() {
        var t = sel[0].selectedIndex,
            r = inp.index(inp.filter(":checked")),
            num = {
            1: {
                0: 2500,
                1: 500
            },
            2: {
                0: 2800,
                1: 800
            }
        }[t][r] || 0;
        price.val(num);
        num && block.removeClass('none')
    })
});
  </script>
</head>

<body>
   <select name="type" class="type">
     <option ></option>
     <option>Тип1</option>
     <option>Тип2</option>
   </select>
   <p></p>
   <label>
      <input type="radio" name="time" value="yestime" class="rrad">
      <div class="rtext">Трубы горят</div>
      </label>

      <label>
      <input type="radio" name="time" value="notime" class="rrad">
      <div class="rtext">Время есть</div>
      </label>

     <input type="text" class="price" value="0" readonly>
     <div class="priceblock none">скрытый блок</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript