div没有正确插入问题jquery

Question

我在正确的区域插入<div> 元素时似乎遇到了问题。我想按下一个按钮，在本例中为“更多信息”，并使用 jquery 在第一个 div 区域下显示更多信息。

示例：

<div id="Main-info">
     <div id="more-info">

     </div> 
</div>

我遇到的问题是“主要信息”区域正在调用 php 脚本并从数据库中获取信息并将其显示在表格中。我在“更多信息”div 中加载了第二个 php 文件，因此当我按下更多信息按钮时，第二个 php 文件位于整个第一个 div 下，但我希望它位于我单击的特定信息下.

我正在尝试完成的一个更好的例子是wefollow.com 站点，您可以在其中按下更多信息按钮，然后在您单击的信息下方显示更多信息。就我而言，附加信息位于底部的整个表格下方。

代码如下：

index.php:

<?php
include("buy.functions.php");
?>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="listing.js"></script>

    <div id="article-area">
        <h1>Welcome</h1>
    <div id="output-listings">
            <div id="more-information">

            </div>
    <?php outputListingsTable(); ?>

    </div><!--end output-listings-->

购买.functions.php：

<?php
function outputListingsTable()
{
    $mysql = new mysqli('localhost', 'root', 'root', 'ajax_demo') or die('you\'re dead');
    $result = $mysql->query("SELECT * FROM explore") or die($mysql->error);

    if($result) 
    {
        echo "<table> \n";

        while($row = $result->fetch_object()) 
        {
            $id = $row->id;
            $siteName = $row->site_name;
            $siteDescription = $row->site_description;
            $siteURL = $row->site_url;
            $sitePrice = $row->site_price;

            echo "<div id=\"" . $id . "\"> \n";
            echo "  <tr> \n";
            echo "      <td>" . $siteName . "</td> \n";
            echo "      <td>" . $siteURL . "</td> \n";
            echo "      <td><a id=\"" . $id . "\" class=\"more-info\" href=\"#\">More info</a></td> \n";            
            echo "  </tr> \n";
            echo "</div> \n";           
        }

echo "</table> \n";
    }

}

?>

getinfo.php:

<?php
function outputDescriptionTable($id)
{
    $mysql = new mysqli('localhost', 'root', 'root', 'ajax_demo') or die('you\'re dead');   
    $result = $mysql->query("SELECT * FROM explore WHERE id=" . $id) or die($mysql->error);

    if($result) 
    {
        echo "<table> \n";

        while($row = $result->fetch_object()) 
        {
            $siteName = $row->site_name;
            $siteDescription = $row->site_description;
            $siteURL = $row->site_url;
            $sitePrice = $row->site_price;

            echo "<div id=\"more-information\"> \n";
            echo "  <tr> \n";
            echo "      <td>" . $siteDescription . "</td> \n";
            echo "      <td>" . $sitePrice . "</td> \n";
            echo "  </tr> \n";
            echo "</div> \n";           
        }

echo "</table> \n";
    }

}
?>
    <?php $id = $_GET['id']; ?>
    <?php outputDescriptionTable("$id"); ?>

listing.js：

$(function(){
$("tr").hover(function(){
    $(this).addClass("hover");
}, function() {
    $(this).removeClass("hover");
});

$('.more-info').click(function() {
$('#more-information').show().load('getinfo.php?id=' + $(this).attr('id'));
return false;
});
});

Answer 1

jQuery 的closest 应该可以解决您的问题。比如：

$('.more-info').click(function(e) {
    $(e.target).closest('.more-information').show().load('getinfo.php?id=' + $(this).attr('id'));
    return false;
});

来自文档：

首先查看最接近的作品 当前元素，看看它是否匹配 指定的表达式，如果是的话 只返回元素本身。如果它 不匹配那么它将继续 遍历文档，父级 父级，直到找到一个元素 匹配指定的表达式。如果 没有找到匹配的元素然后没有 将被退回。

此外，您的“更多信息”div 应该有 class 更多信息，而不是 ID，因为 ID 应该是唯一的，否则可能会发生奇怪的事情。