使用jQuery切换动态搜索结果

我是jQuery新手，遇到了一个问题。我有一个表单，它使用php查询数据库，然后显示结果。我的想法是只显示返回行的一部分，并使用按钮显示返回行的其余部分。问题在于，当单击按钮时，它会显示其他字段，但显示的是所有结果，而不是所选结果

我的html：

<div id="DocumentResults">
<!-- foreach($documents as $document) : -->
    <div class="Document">
        <div class="DocumentName"><strong>Product Name</strong></div><!-- end .DocumentName -->
        <div class="DocumentActions">
            <ul>
                <li><a class="button_link toggle" href="#"><span>Details</span></a></li>
                <li><a class="button_link" href="" target="_blank"><span>View</span></a></li>
            </ul>
            <div class="clear"></div>
        </div><!-- end .DocumentActions -->

        <div class="clear"></div>

        <div class="DocumentDetails">
            <ul>
                <li>Manufacturer: </li>
                <li>Product Number(s): </li>
            </ul>
            <div class="clear"></div>
        </div><!-- end .DocumentDetails -->
    </div>      
<?php endforeach; ?>

如果有人能帮我，我将不胜感激。

通过设置

$（'.DocumentDetails'）

的动画，您将锁定该类的所有实例。相反，使用

this

变量（和一些DOM遍历）只针对正在单击的结果：

jQuery('.toggle').toggle(
    function () {$(this).closest('.Document').find('.DocumentDetails').animate({opacity:'toggle'}, 500);},
    function () {$(this).closest('.Document').find('.DocumentDetails').animate({opacity:'toggle'}, 500);}
);

---

您应该找到您按钮的正确祖先，并将选择器限制为其后代：

jQuery('.toggle').toggle(
    function () {
        $(this)
            .parent().parent().parent().parent()
            .find('.DocumentDetails').animate({opacity:'toggle'}, 500);
    },
    function () {
        $(this)
            .parent().parent().parent().parent()
            .find('.DocumentDetails').animate({opacity:'toggle'}, 500);
    }
);

---

非常感谢你。我花了4个小时想弄明白。

jQuery('.toggle').toggle(
    function () {
        $(this)
            .parent().parent().parent().parent()
            .find('.DocumentDetails').animate({opacity:'toggle'}, 500);
    },
    function () {
        $(this)
            .parent().parent().parent().parent()
            .find('.DocumentDetails').animate({opacity:'toggle'}, 500);
    }
);