如何查詢數據庫中最后選擇的單選按鈕？

Question

我需要知道如何查詢數據庫以獲取用戶選擇的最后一個單選按鈕，以便當他們刷新頁面或登錄不同的 session 時，他們將看到他們的選擇。 我正在使用 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");
});
});

Answer 1

您可以通過調用 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>