Обработка выбора формы - PullRequest
Новая
       2

Обработка выбора формы

0 голосов
/ 04 ноября 2010

У меня есть страница выбора продукта, где вы выбираете план, и после выбора он отображает информацию о выборе в div.Проблема в том, что если страница обновляется, сводный div исчезает, но он запоминает ваш выбор формы.Как я могу получить его, чтобы он также запоминал сводку? 

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>
<body>
<script>
$(document).ready(function(){
      $("div.plan").hide();

      $("input[type=radio]").click(function(){
          $("div.plan").hide();
          $("div[planid=" + $(this).val() +"]").show();
      });
});
</script>

<input type="radio" name="plan" value="1" /> Plan 1 <br />
<input type="radio" name="plan" value="2" /> Plan 2 <br />
<input type="radio" name="plan" value="3" /> Plan 3 <br />

<div class="plan" planid="1">Plan 1 details</div>
<div class="plan" planid="2">Plan 2 details</div>
<div class="plan" planid="3">Plan 3 details</div>

</body>
</html>

Ответы [ 4 ]

1 голос
/ 04 ноября 2010

Вы можете использовать хеш URL для поддержания состояния.

Когда выбор сделан, сделайте что-то вроде этого: 

document.location = document.location + "#P1"

Когда страница перезагрузится, найдите хэш в URL и проанализируйте, что находится на другой стороне.

"# P1" (1 = план 1, 2 = план 2 и т. Д.)

Затем настройте отображение соответствующим образом.

1 голос
/ 04 ноября 2010

После того, как ваш код исчез, вы можете запустить обработчик click на выбранном переключателе, например: 

$(document).ready(function(){
  $("div.plan").hide();

  $("input[type=radio]").click(function(){
      $("div.plan").hide();
      $("div[planid=" + $(this).val() +"]").show();
  }).filter(':checked').click();
});

Для этого используется обработчик, который вы уже связываете, затем из техelements получает :checked one и выполняет обработчик события click, показывая правильный <div>.

В качестве отступления, planid не является допустимым атрибутом, если вы выполняете этоиди дальше и используй data- атрибуты , поэтому ты будешь HTML5 действительным на ходу (они не представляют проблем в HTML4).

0 голосов
/ 05 ноября 2010

Это можно сделать с помощью чистого CSS.

Дайте вашим переключателям некоторые классы (план-1, план-2, план-3 и т. Д.) И присвойте элементам div.plan несколько классов для соответствия (план-1, план-2, план-3 и т. д. (с одинаковым именем класса это нормально): 

.plan {
  display: none;
}

.plan-1:checked ~ .plan-1,
.plan-2:checked ~ .plan-2,
.plan-3:checked ~ .plan-3 {
  display: block;
}

конечно, для этого требуются селекторы CSS3, javascript может обрабатывать обратную совместимостьИспользование селектора :checked в CSS может позволить вам создавать меню переключателей pure-css вместе с эффектами аккордеона pure-css.

0 голосов
/ 04 ноября 2010

Добавьте ваш код при загрузке страницы: 

$(document).ready(function(){
  $('input:radio:checked').each(function(){
    $('div[planid=' + $(this).val + ']').show();
  });
});

Обратите внимание, что при загрузке страницы может возникать вспышка без отображения сводки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...