javascript - jquery .show() 和后退按钮

Question

我想弄清楚如何让我的网页在用户使用后退按钮返回时看起来一样。在我的示例中，单击一个复选框，然后单击它显示的 url。进入 google 或 yahoo 后，单击后退按钮，注意 url 不再显示。复选框仍处于选中状态，但没有 url。

$(document).ready(function() {
  $("#googlelink").hide();
  $("#yahoolink").hide();
  
  $("#google").click(function() {
    if($('#google:checked').length) {
      $("#googlelink").show();
    } else {
      $("#googlelink").hide();
    }
  });
  
  $("#yahoo").click(function() {
    if($('#yahoo:checked').length) {
      $("#yahoolink").show();
    } else {
      $("#yahoolink").hide();
    }
  });
});

<div class="check">
  <p>
    <input type="checkbox" value="google" id="google" />
    <label for="google">show google link</label>
  </p>
  <p>
    <input type="checkbox" value="yahoo" id="yahoo" />
    <label for="yahoo">show yahoo link</label>
  </p>
</div>

<div id="googlelink">
  <a href="http://google.com">google.com</a>
</div>
<div id="yahoolink">
  <a href="http://yahoo.com">yahoo.com</a>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 

Answer 1

您可以精简代码并在 DOMReady 上触发更改事件。

$(document).ready(function() {
    $("#googlelink, #yahoolink").hide();

    $("input[type=checkbox]").on('change', function() {
           var id = '#' + this.id + 'link';
           $(id).css('display', this.checked ? 'block' : 'none');
    }).change();

    //$("input[type=checkbox]").each(function() {
    //   var id = '#' + this.id + 'link';
    //   $(id).css('display', this.checked ? 'block' : 'none');
    //})
})