1

我有一个使用 cookie 保持 div 打开的工作示例。部分问题是我使用选择列表而不是单选按钮。另一个问题是选择列表和对应的div的值是动态生成的。然而，让事情变得更容易一些，选择的值总是与 div id 相同。 我只是想这样做，所以如果重新加载页面，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 插件：http: //plugins.jquery.com/project/Cookie更接近我在做什么和需要帮助的内容如下：

<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
  • 如果cooke不存在，不打开对应的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-1 book-2 和 book-3 才能使用我建议的代码。

没有声称它是优化的，但这就是要点。;-) 如果未选择任何值，则默认选择第一个，其值为空字符串。准备好一个文档，获取值，如果它不是空字符串，则必须有一个需要显示的 div。根据列表的值显示它。

于 2011-11-20T18:01:42.890 回答