使用jQuery切换动态搜索结果

Question

我是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; ?>

以及jQuery

$(document).ready(function() {  
jQuery(".DocumentDetails").hide();
// works but shows details for ALL results.
jQuery('.toggle').toggle(
    function () {$('.DocumentDetails').animate({opacity:'toggle'}, 500);},
    function () {$('.DocumentDetails').animate({opacity:'toggle'}, 500);}
);
});

如果有人能帮我做这件事，我将不胜感激。

Answer 1

通过设置$('.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);}
);

http://jsfiddle.net/jESaE/

Answer 2

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

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