0

我需要知道如何在数据库中查询用户选择的最后一个单选按钮，这样当他们刷新页面或登录不同的会话时，他们会看到他们的选择。我将 jquery.min.js (1.7.1) 用于显示/隐藏功能。

这是HTML：

    <div class="wrap">
    <div class="box">
      <div align=center id="catNav">
<label> &nbsp; <input type="radio" name="group_name" id="list-one-button" value="01" checked="checked" /></label>
<label> &nbsp; <input type="radio" name="group_name" id="list-two-button" value="02" /></label>
<label> &nbsp; <input type="radio" name="group_name" id="list-three-button" value="03" /></label>
<label> &nbsp; <input type="radio" name="group_name" id="list-four-button" value="04" /></label>
<label> &nbsp; <input type="radio" name="group_name" id="list-five-button" value="05" /></label>
<label> &nbsp; <input type="radio" name="group_name" id="list-six-button" value="06" /></label>
<label> &nbsp; <input type="radio" name="group_name" id="list-seven-button" value="07" /></label>
      </div>

      <ul class="cat-list" id="list-one">
<li><a href="#"><img src="img1.jpg"></a></li>
      </ul>

      <ul class="cat-list" id="list-two">
<li><a href="#"><img src="img2.jpg"></a></li>
      </ul>

      <ul class="cat-list" id="list-three">
<li><a href="#"><img src="img3.jpg"></a></li>
      </ul>

      <ul class="cat-list" id="list-four">
<li><a href="#"><img src="img4.jpg"></a></li>
      </ul>

      <ul class="cat-list" id="list-five">
<li><a href="#"><img src="img5.jpg"></a></li>
      </ul>

      <ul class="cat-list" id="list-six">
<li><a href="#"><img src="img6.jpg"></a></li>
      </ul>

      <ul class="cat-list" id="list-seven">
<li><a href="#"><img src="img3.jpg"></a></li>
      </ul>         
    </div>
</div>

这是Javascript：

$(function(){
$("#list-two").hide();  
$("#list-three").hide();    
$("#list-four").hide();
$("#list-five").hide();
$("#list-six").hide();
$("#list-seven").hide();

$("#list-one-button").click(function(){
    $(".cat-list").slideUp(600);
    $("#list-one").slideDown(600);
});

$("#list-two-button").click(function(){
    $(".cat-list").slideUp(600);
    $("#list-two").slideDown(600);
}); 

$("#list-three-button").click(function(){
    $(".cat-list").slideUp(600);
    $("#list-three").slideDown(600);
}); 

$("#list-four-button").click(function(){
    $(".cat-list").slideUp(600);
    $("#list-four").slideDown(600);
});

$("#list-five-button").click(function(){
    $(".cat-list").slideUp(600);
    $("#list-five").slideDown(600);
});

$("#list-six-button").click(function(){
    $(".cat-list").slideUp(600);
    $("#list-six").slideDown(600);
});

$("#list-seven-button").click(function(){
    $(".cat-list").slideUp(600);
    $("#list-seven").slideDown(600);
});

$("#catNav li a").click(function() {
    $("#catNav li").removeClass("activeCatButton");
    $(this).parent().addClass("activeCatButton");
});
});
4

1 回答 1

0

您可以通过使用 AJAX 调用来达到预期的效果。

这是jQuery部分：

$('ul.cat-list').click(function() {
  var id = this.prop('id');
  $.ajax({
    type: "POST",
    url: "saveSelection.php",
    data: "id=" + id,
  }).done(function( msg ) {
    // this is just for debugging purposes
    // console.log("Data Saved: " + msg);
  });
});

在 PHP 中，您可以保存该值。这可能是文件saveSelection.php：

<?php
  // save in session
  $_SESSION['selection'] = $_POST['id'];
  // or save in database, for example by storing the user's ip address or login id
  ...
?>

然后，如果用户再次请求该页面，请检查是否有预先保存的值，并将单选按钮呈现为选中状态。

顺便说一句，您错误地使用了列表。正确的是一个ul标签带有多个li标签：

<ul class="cat-list" id="list">
    <li id="item-one"><a href="#"><img src="img1.jpg"></a></li>
    <li id="item-two"><a href="#"><img src="img2.jpg"></a></li>
    ...
</ul>
于 2012-04-10T10:11:36.357 回答