2

ユーザーが戻るボタンを使用して戻ったときに、自分のWebページが同じように見えるようにする方法を見つけようとしています。私の例では、チェックボックスをクリックしてから、表示されている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>

4

2 に答える 2

2

コードを縮小して、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');
    //})
})
于 2012-09-27T02:15:06.833 に答える
0

これはブラウザの動作のように聞こえます。たとえば、Chromeでは、フォームの一部のオプションが設定されている場合でも、ページ間を前後に移動するときにすべてのテキストフィールドを空にするのが一般的です。

于 2012-09-27T02:11:37.010 に答える