将jQuery与PHP结合使用

Question

我有一些简单的jQuery切换脚本，像这样：

<script type="text/javascript">
$(document).ready(function() {
  $('#clickedit').click(function() {
    $('#st').toggle();
  });
});
</script>

当然，在我的HTML中，我有一些标签。

<div id="clickedit">CLICK ITEM TO TOGGLE</div>
<div id="st">content to show/hide</div>

现在...如果我正在使用PHP并且正在迭代几个“项”，每个“项”都有要显示/隐藏的内容，我不能为我的div设置静态ID，因为脚本就无法工作。 我可以将一些项目的ID分配给我的div（类似于echo "<div id='clickedit".$id."'>";和echo "<div id='st".$id."'>";），但是我不知道如何在我的jQuery脚本中处理它们！ 我刚刚发现jQuery，它很棒，但对我来说仍然很困惑:) 所以任何帮助都将是极好的！
提前感谢！

- errata

Answer 1

我不了解你的具体情况，但是类似以下内容应该可以解决问题：

<div class="clickedit" id="clickedit123">CLICK ITEM TO TOGGLE</div>
<div class="st" id="st123">content to show/hide</div>

你需要将类名称设置为能够一次性为所有项目分配单击事件，但使用ID为每个项目指定特定的ID。

$('.clickedit').click(function() {
    var id = this.id.replace('clickedit', '');
    $('#st' + id).toggle();
}

在点击事件中获取ID，去掉通用部分，使用该ID查找必要的元素进行切换。

- pilsetnieks

---

哇！ :) jQuery <3 非常感谢你们两个，我要更深入地阅读jQuery文档 :) - errata

Answer 2

使用类选择器和一些jQuery的技巧！

<script type="text/javascript">
$(document).ready(function() {
  $('.div1').click(function() {
    $(this).next('.div2').toggle();
  });
});
</script>

那么你的PHP代码将会改变，你可以移除你的ID：

echo "<div class='div1' id='clickedit".$id."'>"; and echo "<div class='div2' id='st".$id."'>";

- Dustin Laine

---

很有可能他需要切换的 div 并不与可点击的 div 相邻。（我知道在这个例子中它是相邻的，但当它不相邻时整个事情就会崩溃）。 - pilsetnieks

当然可以，这可以通过在PHP循环中使用选择器通配符并附加ID来处理。 - Dustin Laine