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循环中，所以它们重复一到六次。当用户单击其中一个按钮时，将显示所有隐藏的div。我想只是隐藏的与点击按钮相关的div显示。

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

编辑，回应评论

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绑定，但更改隐藏的选择。您可以搜索下一个[直接在单击的特定按钮之后的元素]，而不是抓取您现在正在执行的所有隐藏的内容。

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

更新

我为你创建了一个小提琴，我假设它与你的php循环的输出类似。我早期回答的一个变化是，而不是使用next（），我在每个组周围放置一个div，因为我认为你会使用.parent（）。find（）

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

更新2：使用ID

看到你的PHP循环和你的嵌套表以及可能复杂的html结构，我不再通过邻近选择jquery是一个好主意[无论是通过大型父（）链还是兄弟查找]。

所以我认为这是注射你的id的情况。我假设你的表结构有一个你可以从$ row_season获得的id（$ row_season [“id”]）

然后你可以将它放在锚中：

<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

Answer 2

如果您的结构是这样的：

<div class="container">
  <a href="javascript:;" class="click buttonSearchList">&nbsp;&nbsp; Enquire or  Book</a>
  <div class="hiddenstuff" style="display:none">
  <!-- HTML form in here -->
  </div>
</div>

你可以这样做你的js：

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

这与William Newby的答案类似，但仔细看看你的while循环，我认为你可以这样做：

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

有几种方法可以做到，我希望我有用。

PHP循环中的jQuery

2 个答案: