javascript - PHP While 循环中的 jQuery

Question

我正在使用 jQuery 在单击按钮时显示页面的额外区域。

脚本是

$(document).ready(function() {
    $("#prices").on('click', 'a.click', function() {
        $(".hiddenstuff").slideToggle(1000),
        $("a.click").toggleClass("faded");
    });
});

然后是按钮

<a href="javascript:;" class="click buttonSearchList">&nbsp;&nbsp; Enquire or Book</a>

新发现的区域是

<div class="hiddenstuff" style="display:none">
<!-- HTML form in here -->
</div>

我遇到的问题是按钮和“hiddenstuff”div 包装在 PHP while 循环中，因此它们会重复 1 到 6 次之间的任何内容。当用户单击其中一个按钮时，所有隐藏的 div 都会显示出来。我只想显示与单击按钮相关的隐藏 div。

我假设我必须创建一个在 while 循环中递增的 javascript 变量，并以某种方式将其构建到脚本中。但我就是看不出如何让它发挥作用。

编辑，回应评论

while 循环实际上是一个do-while 循环。循环内的代码约为 200 行 PHP 和 HTML。这就是为什么我没有在我的问题中全部展示。在一个缩短的版本中，但不像以前那样缩短，它是

do {
<!-- HTML table in here -->
<a href="javascript:;" class="click buttonSearchList">&nbsp;&nbsp; Enquire or Book</a>
<!-- HTML table in here -->
<div class="hiddenstuff" style="display:none">
<!-- HTML form and table in here -->
</div>
<!-- More HTML in here -->
} while ($row_season = mysql_fetch_assoc($season));

编辑 2 最终解决方案与下面回复中的 UPDATE2 完全相同。

Answer 1

您要做的最简单的事情是保持您的 onclick 绑定(bind)但更改您的 hiddenstuff 选择。您可以搜索下一个 [紧接在被单击的特定按钮之后的元素]，而不是抓取您现在正在做的所有隐藏的东西。

$(this).next('div.hiddenstuff').slideToggle(1000);

更新

我为您创建了一个 fiddle ，我认为它与您的 php 循环的输出类似。我早期回答的一个变化是没有使用 next()，我在每个组周围放了一个 div，因为我假设你会使用 .parent().find()

http://jsfiddle.net/wnewby/B25TE/

更新 2:使用 ID

看到您的 PHP 循环和您的嵌套表以及可能复杂的 html 结构，我不再认为 jquery select by proximity 是一个好主意 [无论是通过大的 parent() 链还是兄弟查找]。

所以我认为这是注入(inject)您的 ID 的情况。我假设你的表结构有一个 id，你可以从 $row_season ( $row_season["id"] )

然后您可以将它放在 anchor 中:

<a href="javascript:;" data-rowid=" . $row_season['id'] . " class="click buttonSearchList">&nbsp;&nbsp; Enquire or Book</a>

你的隐藏元素也是如此

<div class="hiddenstuff" data-rowid=" . $row_season['id'] . "  style="display:none">

然后你的js就可以轻松找到了

$(document).ready(function() {
    $("#prices").on('click', 'a.click', function() {
        var rowid = $(this).attr("data-rowid");
        $(".hiddenstuff[data-rowid='" + rowid + "']").slideToggle(1000),
        $(this).toggleClass("faded");
    });
});

updated fiddle