1

Cookieを使用してdivを開いたままにする実用的な例があります。問題の一部は、ラジオボタンの代わりに選択リストを使用していることです。もう1つの問題は、選択リストと対応するdivの値が動的に生成されることです。ただし、少し簡単にするために、selectの値は常にdividと同じです。 私はそれを作ろうとしているので、ページがリロードされても、divは開いたままになります。 これが私が探しているものに近いと思う例です： 

<fieldset>
<ol class="formset">
  <li>
    <label for="fname2">First Name: </label>`
    <input type="text" id="fname2" value="" name="fname2"/>
  </li>
  <li>
    <label for="lname2">Last Name: </label><br />
    <input type="text" id="lname2" value="" name="lname2"/>
  </li>
  <li>
    <label for="email2">Email Address: </label><br />
    <input type="text" id="email2" value="" name="email2" />
  </li>
  <li>
    <label for="age2">Are you above 21 yrs old?</label><br />
    <input type="radio" name="age2" value="Yes" class="aboveage2" /> Yes
    <input type="radio" name="age2" value="No" class="aboveage2" /> No
  </li>
</ol>
<ol id="parent2" class="formset">
  <li>
    <strong>Parent/Guardian Information:</strong>
  </li>
  <li>
    <label for="pname2">Parent Name: </label>
    <input type="text" id="pname2" value="" name="pname2"/>
  </li>
  <li>
    <label for="contact2">Contact No.: </label><br />
    <input type="text" id="contact2" value="" name="contact2"/>
  </li>
</ol>
<input type="submit" name="submit" value="Submit" class="submitbtn" />  
</fieldset>

<script>
  $(document).ready(function(){
    $("#parent2").css("display","none");
    $(".aboveage2").click(function(){
      if ($('input[name=age2]:checked').val() == "No" ) {
        $("#parent2").slideDown("fast"); //Slide Down Effect
        $.cookie('showTop', 'expanded'); //Add cookie 'ShowTop'
      } else {
        $("#parent2").slideUp("fast");  //Slide Up Effect
        $.cookie('showTop', 'collapsed'); //Add cookie 'ShowTop'
      }
    });
    var showTop = $.cookie('showTop');
    if (showTop == 'expanded') {
      $("#parent2").show("fast");
      $('input[name=age2]:checked');
    } else {
      $("#parent2").hide("fast");
      $('input[name=age2]:checked');
    }
  });
</script>

注として、ここにあるcookieプラグインを使用しているIm：http: //plugins.jquery.com/project/Cookie Imが行っていることに近く、助けが必要なのは次のとおりです。

<html>
  <head>
    <script>
      $(document).ready(function() {
        $('div.book').css("display","none"); // display none on all ol that doesn't have book class
        $('#book_list').change(function() {
          $('div.book').slideUp("fast"); //Slide Up Effect
          $('#' + $(this).val()).slideDown("slow"); //Slide Down Effect
        });
      });
    </script>
  </head>
  <body>
    <form>
      <select id="book_list">
        <option value="">Select</option>
        <option value="1">Number 1</option>
        <option value="2">Number 2</option>
        <option value="3">Number 3</option>
      </select>
    </form>
    <div id="1" class="book">Div number 1</div>
    <div id="2" class="book">Div number 2</div>
    <div id="3" class="book">Div number 3</div>
  </body>
</html>

データベースから値を引き出します。これは、メニュー項目を選択したままにするためにリロード時に使用するPHPです。

<?php
$bookcookie = $_COOKIE['book'];
$book_list = "<select id=\"book_list\">";
while($book = mysql_fetch_array($book_result)){
//THE BOOK LIST
$book_list .= "<option value=\"" . $book['id'] . "\"";
if(isset($bookcookie) && $bookcookie == $book['id']){
    $book_list .= " selected";
}
$book_list .= ">Number " . $book['id'] . "</option>";
}
$book_list .= "</select>";
?>
4

1 に答える 1

0

私はあまりにも多くのコードを書くのが少し嫌いです。あなたがしっかりした試みを提供することができれば、何百人もの人々があなたがそのラストマイルを手に入れるのを喜んで手伝ってくれるでしょう！

でも、アドバイスしてもかまいません。

あなたの最初のアプローチはまったく悪くありません。適切なdivをすべて非表示にしてから、変更イベントに基づいて適切なdivを表示します。新しいロジックを挿入する必要があります。

  • ドキュメントの準備ができたら、開く必要のあるdivを示すCookieが存在するかどうかを確認します。
  • Cookieが存在する場合は、その値を取得して適切なdivを表示します
  • クックが存在しない場合は、対応するdivを開かないでください
  • 変更ハンドラーで、ユーザーが選択を行ったときにCookieを設定してから、アニメーションを実行します

お役に立てば幸いです。

[以下のコメントごとに更新]

設定されている「選択済み」に基づいて作成する場合は、次のようにする必要があります。

$(document).ready(function() {
  $('div.book').css("display","none"); // display none on all divs with class 'book'
  var listVal = $('#book_list').val();
  if(listVal != "") {
    $('#book-'+listVal).show();
  }


  $('#book_list').change(function() {
    $('div.book').slideUp("fast"); //Slide Up Effect
    $('#book-' + $(this).val()).slideDown("slow"); //Slide Down Effect
  });
});

途中で気付いた変更に注意してください。divを単なる数値にすることはできません。有効なIDは文字で始まる必要があるため、先頭に「book-」というパターンを追加しました。更新されたHTMLを投稿しませんでしたが、提案されたコードを使用するには、divのIDがbook-1book-2とbook-3である必要があります。

最適化されているとは言いませんが、それが要点です。;-)値が選択されていない場合、デフォルトで最初の値が選択され、値は空の文字列になります。1つのドキュメントの準備ができたら、値を取得します。空の文字列でない場合は、表示する必要のあるdivが必要です。リストの値に基づいて表示します。

于 2011-11-20T18:01:42.890 に答える