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、複数のタグを持つ1 つの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 に答える