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

发布于 2024-12-17 08:39:06 字数 3931 浏览 1 评论 0原文

我有一个使用 cookie 保持 div 打开的工作示例。部分问题是我使用选择列表而不是单选按钮。另一个问题是选择列表和相应div的值是动态生成的。不过，为了让事情变得更简单，select 的值始终与 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>";
?>

原文

I have a working example that keeps a div open using cookies. Part of the issue is that Im using a select list instead of a radio button. Another problem is that the values of the select list and corresponding div are dynamically generated. However, making things a little easier, the value of the select is ALWAYS the same as the div id. Im just trying to make it so if the page is reloaded, the div stays open. Here is the example that I think is close to what Im looking for:

<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>

As a note Im using the cookie plugin found here: http://plugins.jquery.com/project/Cookie Closer to what Im doing and need help with is the following:

<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>

I draw the values from a database. This is the PHP I use on reload to keep the menu item selected:

<?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>";
?>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无戏配角 2024-12-24 08:39:06

我有点讨厌写太多代码；如果您能提供扎实的尝试，数百人将很乐意帮助您完成最后一英里！

不过我不介意提供建议。

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

在文档准备好后，检查是否存在 cookie 来告诉您需要打开哪个 div。
如果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。根据列表的值显示它。

I'm a bit loathe to write too much code; if you can provide a solid attempt, hundreds of people will be happy to help you get that last mile!

I don't mind giving advice, though.

Your initial approach isn't bad at all. Hide all appropriate divs, and then based on change event, show the appropriate one. You just need to insert some new logic:

On document ready, check to see if a cookie exists that tells you what div needs to be opened.
if the cookie exists, retrieve its value and show the appropriate div
if the cooke does not exist, do not open a corresponding div
in the change handler, when a user makes a selection, set the cookie and then perform the animation

Hope that helps!

[updated per comments below]

If you want to base it on "selected" being set, you just need to do this:

$(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
  });
});

Note a change I noticed along the way: your divs can't be just a number; valid IDs must start with a letter, so I added the pattern "book-" to the beginning. I didn't post updated HTML, but your divs will need to have IDs book-1 book-2 and book-3 to use my suggested code.

Not claiming it's optimized, but that's the gist. ;-) If no value is selected, the first one is selected by default, which has a value of empty string. One document ready, get the value and if it's NOT an empty string there must be a div that needs showing. Show it based on the list's value.

回复收藏 0 原文

~没有更多了~