Fatal编程技术网
  • php/
  • Php jquery幻灯片和淡入淡出在使用cookie重新加载时保持打开状态

Php jquery幻灯片和淡入淡出在使用cookie重新加载时保持打开状态

php javascript jquery

Php jquery幻灯片和淡入淡出在使用cookie重新加载时保持打开状态,php,javascript,jquery,jquery-cookie,Php,Javascript,Jquery,Jquery Cookie,我有一个使用cookies保持div打开的工作示例。问题的一部分是Im使用了选择列表而不是单选按钮。另一个问题是select列表和相应div的值是动态生成的。然而，让事情变得简单一点，select的值始终与div id相同。我只是想让它在页面重新加载时保持打开状态。下面是一个我认为与我所寻找的很接近的例子： <fieldset> <ol class="formset"> <li> <label for="fname2">First Na

我有一个使用cookies保持div打开的工作示例。问题的一部分是Im使用了选择列表而不是单选按钮。另一个问题是select列表和相应div的值是动态生成的。然而，让事情变得简单一点，select的值始终与div id相同。我只是想让它在页面重新加载时保持打开状态。下面是一个我认为与我所寻找的很接近的例子：

<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插件如下所示：更接近我所做的事情，需要帮助：

<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>";
?>
我有点讨厌写太多的代码；如果你能提供一个坚实的尝试，数以百计的人将乐于帮助你完成最后一英里

不过，我不介意提建议

你最初的方法一点也不差。隐藏所有适当的div，然后根据更改事件显示适当的div。您只需要插入一些新逻辑：

在DocumentReady上，检查是否存在告诉您需要打开哪个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必须以字母开头，所以我在开头添加了模式手册。我没有发布更新的HTML，但是您的div需要有IDs book-1 book-2和book-3才能使用我建议的代码

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

第一个示例代码有几个问题，但我不确定修复这些问题是否相关，或者是否会让您更接近您的答案。第一个示例代码非常有效。这就是证明：浏览器是宽容的。但这并不意味着代码是正确的有一个不匹配的

标签，还有一个误用的标签试图以错误的方式标记多个单选按钮。也许有几个是夸大其词。我绝对希望有一种更有效的方法来做事……这一切都是新的=我找到了一种方法，可以在重新加载时保持选中的值。有没有办法抓取所选的值并打开相应的div？请在重新加载时发布保持该值的代码-否则我们无法帮助。感谢Greg的帮助！我尽我所能地做了一次坚实的尝试。我在这件事上花了一整天的时间。我能请你举个例子吗？即使它忽略了我目前所做的。我明白它的逻辑…我只是很难编写代码。谢谢你刚刚看了你修改过的代码。最大的问题是，您混淆了服务器端和客户端cookie。jQueryCookies插件是用于客户端的。我提到的检查都是在客户端完成的如果您有添加选定类的PHP，您可能不需要jQuery cookies。我以后再谈这个问题不过，我将重新添加我删除的php标记。此时正在创建的唯一cookie是客户端。在重新加载时，用PHP识别cookie，并将选中的设置为菜单。我的想法是，如果设置了selected，我就可以使用jquery查看它，并在本例中显示div。