Question

我有一个产品选择页面，您可以在其中选择一个计划，一旦选择它，它会在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>

Answer 1

在您的代码居住后，您可以在所选单选按钮上触发click处理程序，如下所示：

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

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

这样做是使用您已绑定的处理程序，然后从这些元素获取:checked并执行click事件处理程序，显示正确的<div>。

顺便说一句，planid不是一个有效的属性，如果您正在这条路上继续使用data- attributes，那么您将获得HTML5有效（他们不会HTML4中的问题。）

Answer 2

您可以使用URL哈希来维护状态。

选择后，请执行以下操作：

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

当页面重新加载时，查找URL中的哈希并解析另一方的内容。

“＃P1”（1 =计划1,2 =计划2等）

然后相应地调整显示器。

Answer 3

在页面加载时添加代码：

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

请注意，页面加载时可能会闪烁，但不会显示摘要。

Answer 4

这可以用纯CSS处理。

为你的单选按钮提供一些类（plan-1，plan-2，plan-3等），并为你的div.plan元素提供一些匹配的类（plan-1，plan-2，plan-3，等;使用相同的类名很好）：

.plan {
  display: none;
}

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

当然，这需要CSS3选择器，javascript可以处理向后兼容性。使用CSS中的:checked选择器可以创建纯css切换菜单以及纯CSS手风琴效果。

表格选择处理

4 个答案: