Question

我似乎在将<div>元素插入正确的区域时遇到问题。我想按一个按钮，在这种情况下是“更多信息”，并使用jquery在第一个div区域下显示更多信息。

示例：

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

     </div> 
</div>

我遇到的问题是“主要信息”区域正在调用PHP脚本并从数据库中获取信息并将其显示在表格中。第二个php文件我加载了“more-info”div所以当我按下更多信息按钮时，第二个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-->

buy.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;
});

来自doc：

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

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

div没有正确插入问题jquery

的index.php：

buy.functions.php：

getinfo.php：

listing.js：

1 个答案: