【问题标题】:Slide Up/Down does not work properly向上/向下滑动无法正常工作
【发布时间】:2013-07-24 15:35:43
【问题描述】:

您好,我想使用表格显示一些搜索结果。在我的代码中,基本详细信息显示在一个表格中,如果我们想查看更多详细信息,您必须单击查看更多选项。隐藏详细信息也显示在单独的表格中。但是我的代码有问题。如果我的数据库中有多个搜索结果,则有关第一人称的详细信息将根据需要显示。这意味着我想查看更多详细信息,我想单击查看更多,然后它会滑下隐藏表。但搜索结果的其余部分也显示隐藏的表格。而且,如果我单击其余部分的查看更多选项,它会再次滑下第一人称表的隐藏表。在这里,我附上了我的代码。你能帮我解决这个问题吗?

<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>&nbsp;&nbsp;&nbsp;&nbsp;<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>

【问题讨论】:

  • 那么我想补充一点,你不应该使用mysql_query,而是使用mysqli。 (php.net/manual/en/book.mysqli.php)。而且您永远都不应该通过查询获得 id,并使用无限量的其他查询来选择其余数据。使用这个:SELECT * FROM tutor_register WHERE district='{$district}' AND catID='{$category}' AND subID='{$subject}'。然后你可以删除第一个 while 循环。此外,使用 PDO 或 MySQLI 的绑定方法,而不是直接将变量放入查询中,最后但并非最不重要。了解 MySQL 连接表(谷歌了解所有这些!)

标签: php jquery slide dynamic-data-display


【解决方案1】:

发生的事情是$("#more") 选择每个 ID 为 more 的 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" 以防您单击属性为data-id="15".more,从而选择正确的div :)

注意:您不必使用 div 来执行此操作。这也可以解决无效的 HTML,因为您有大量具有相同 id 的元素

见:http://ejohn.org/blog/html-5-data-attributes/

【讨论】:

  • 您好,感谢您的支持和建议。初次加载页面时如何隐藏更多详细信息
  • 只需使用 CSS 将display: none; 放在它们上面。 jQuery 稍后会将其更改为 display: block;
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多