Question

我正在研究一个项目并遇到一个模块。

第1页
用户必须从搜索栏进行搜索，这将使他进入第2页。

第2页
在第2页，所有提取的结果将以div的形式显示给用户。每个结果都有一个与之关联的复选框

当我点击添加到比较复选框时，执行ajax调用并获取所选结果应该出现在隐藏div中。

我的问题是它只显示隐藏div中的第一个结果，而不是使用其他结果。

我的第2页代码

 <script type="text/javascript">
$(document).ready(function()
{
    var check = $('#compare').val();
    $("#compare").change(function() {
if(this.checked) {        
    $.ajax({
        type: 'POST',
        url: 'compare.php',
        dataType : 'JSON',
        data:{value : check},
        success: function(data)
        {
            console.log(data);
            $('#compare_box').html(data);               
        }
    });       

  $("#compare_box").show();
}
else
{
    $("#compare_box").hide();
}       
 });
});
</script>
</head>
<body>
<?php
$query = $_GET['search_bar'];
$query = "call fetch_data('$query')"or die(mysqli_error($conn));
$result = mysqli_query($conn,$query);
while($row = mysqli_fetch_array($result))
{
  $id = $row['course_id'];
$title = $row['course_title'];
$description = $row['course_description'];
$course_url = $row['course_url'];
$video_url = $row['course_video_url'];
$fee = $row['course_fee'];
$duration = $row['course_duration'];
$start_date = $row['course_start_date'];
$university = $row['university_name'];
$course_provider = $row['course_provider_name'];
$instructor = $row['instructor_name'];

         $_SESSION['result'][$id]  = Array('id'=> $id,'course_title' => $title,'course_description'=> $description,'course_url' => $course_url,'video_url' => $video_url,'fee' => $fee,'course_duration'=>$duration,'start_date'=>$start_date,'university' => $university,'course_provider'=>$course_provider,'instructor'=>$instructor);
?>
    <div id='compare_box'>                  
        </div>      

     <div class="col-md-3 photo-grid " style="float:left">

        <div class="well well-sm">

       <a href="final.php?id=<?php echo $id;?>&name=<?php echo $title;?>" target="_blank">
        <h4><small><?php echo $title; ?></small></h4>
       </a>
     <br>
     <input type ='checkbox' name="compare" id="compare" value="<?php echo $id;?>">add to compare
     </div>
</div>
<?php  
}
?>

page3 compare.php

<?php
session_start();
include 'includes/dbconfig.php';
$check = $_POST['value'];
$sql = "SELECT * from course_info_table where course_id = '$check' " or   die(mysqli_error($conn));
$result = mysqli_query($conn,$sql);

$index = 0;
while($row = mysqli_fetch_array($result))
{
    $title = $row['course_title'];

 ?>
<?php
}
echo json_encode($title);
 ?>

Answer 1

您可以更改

<input type ='checkbox' name="compare" id="compare" value="<?php echo $id;?>">

到

<input type ='checkbox' name="compare" class="compare" value="<?php echo $id;?>"> ^you can only have one unique 'id' value in your html doc, which means your first id="compare" will work fine and others with id="compare" will be ignored by the DOM tree

参考：

http://www.w3schools.com/tags/att_global_id.asp

我应该如何将从ajax调用中获取的数据放入隐藏的div框中

1 个答案: