您好我想使用表格显示一些搜索结果。在我的代码中,基本详细信息显示在一个表中,如果我们想要查看更多详细信息,则必须单击查看更多选项。隐藏详细信息也会显示在单独的表中。但我的代码中存在问题。如果我的数据库中有多个搜索结果,则会根据需要显示有关第一人的详细信息。这意味着我想要查看更多细节,我想点击查看更多,然后向下滑动隐藏表。但搜索结果的其余部分也会显示隐藏的表格。如果我点击其余的视图更多选项,它再次滑下第一个人的表的隐藏表。这里我附上了我的代码。你能帮我解决这个问题吗?
<body>
<div class="container"> <!-- container -->
<div class="row" id="main-content">
<div class="span8">
<div class="well"> <!-- -start of well class -->
<?php
dbConnect();
$district = $_POST['district'];
$category = $_POST['catID'];
$subject = $_POST['subID'];
//get the category name
$get_cat_name = mysql_query("SELECT catName FROM tutor_category WHERE catID='{$category}' ");
while($row = mysql_fetch_assoc($get_cat_name ))
{
$cat_name = $row['catName'];
}
//get the subject name
$get_sub_name = mysql_query(" SELECT subName FROM tutor_subjects WHERE catID='{$category}' AND subID='{$subject}'");
while($row = mysql_fetch_assoc($get_sub_name ))
{
$sub_name = $row['subName'];
}
?>
<!-- ****************** Heading Table *******************-->
<table class="table table-bordered">
<tr>
<th> <?php echo $district." District - ". $cat_name ." - ". $sub_name ?> </th>
</tr>
</table>
<!-- ****************** end of heading table *******************-->
<?php
//get tutor IDs
$get_tutor_id = mysql_query(" SELECT DISTINCT tutorID FROM tutor_register_subjects WHERE district='{$district}' AND catID='{$category}' AND subID='{$subject}' ");
while($row = mysql_fetch_assoc($get_tutor_id)) // first
{
$tutor_id = $row['tutorID'];
$query = mysql_query(" SELECT * FROM tutor WHERE tutorID='{$tutor_id}' ");
while($row = mysql_fetch_assoc($query))
{ // second
$fname = $row['firstName'];
$lname = $row['lastName'];
$nic = $row['nic'];
$gender = $row['gender'];
$education = $row['education'];
$address = $row['address'];
$profession= $row['profession'];
$email = $row['email'];
$cnum = $row['contactNum'];
$avatar = $row['avatar'];
} // second
?>
<div class="control-group">
<!-- basic details -->
<table class="table table-bordered">
<tr>
<td width="120" rowspan="4"><?php echo "<img src='uploads/".$avatar."' height='120' width='100'>"?></td>
<th width="120">Name</th>
<td><?php echo $fname." ". $lname?></td>
</tr>
<tr>
<th>NIC</th>
<td><?php echo $nic ?></td>
</tr>
<tr>
<th>Gender</th>
<td><?php echo $gender ?></td>
</tr>
<tr>
<td colspan="2"><a class="more">View More</a> <a class="less">View Less</a></td>
</tr>
</table>
</div>
<!-- end of basic details -->
<!-- more details-->
<div class="control-group" id="more">
<table class="table table-bordered">
<tr>
<th>Contact Number</th>
<td><?php echo $cnum ?></td>
</tr>
<tr>
<th>Email</th>
<td><?php echo $email ?></td>
</tr>
<tr>
<th>Address</th>
<td><?php echo $address ?></td>
</tr>
<tr>
<th>Education</th>
<td><?php echo $education ?></td>
</tr>
<tr>
<th>Work Place</th>
<td><?php echo $profession ?></td>
</tr>
</table>
</div>
<!-- end of more details-->
<legend></legend>
<?php
} // first
?>
</div> <!-- -start of well class -->
</div> <!-- end span12 class -->
</div> <!-- end of row class -->
</div> <!-- container -->
<!-- view more script-->
<script src="../js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#more").hide();
$(".less").click(function(){
$("#more").slideUp(1000);
});
$(".more").click(function(){
$("#more").slideDown(1000);
});
});
</script>
</body>
答案 0 :(得分:0)
正在发生的事情是$("#more")
选择ID更多的每个div,然后更改
为每个.less
和.more
提供当前用户独有的内容:
<div class="less" data-id="<?php echo $person_id; ?>">Show less</div>
<div class="more" data-id="<?php echo $person_id; ?>">Show more</div>
然后在实际数据所在的#more
中,执行相同的操作
<div id="more-<?php echo $person_id; ?>">More information here</div>
现在在你的jQuery中,选择正确的id:
$(".less").click(function(){
$("#more-"+ $(this).attr('data-id')).slideUp(1000);
});
$(".more").click(function(){
$("#more-"+ $(this).attr('data-id')).slideDown(1000);
});
你现在正在有效地做的是告诉jQuery选择div,例如id="more-15"
如果您点击.more
属性data-id="15"
,则选择正确的div:)
注意:您不必使用div来执行此操作。这也可以解决无效的HTML,因为你有大量具有相同id
的元素