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

使用jQuery切换动态搜索结果

2 个答案: