如何告诉JavaScript函数从PHP while循环中获取哪个id？

我有一个JavaScript函数，可以将一个div切换为显示/隐藏，如果我只有一个链接可以切换单个div，它就可以工作。但是我有一个while循环，它创建了几个这样的链接和div，每行一个。但只有第一个环节起作用。我可以在我的id末尾为toggle链接和div添加$，我如何告诉JavaScript查找这个变量

JavaScript:

$(function(){
    var id = document.getElementById();
    $('#toggleDiv').click(function(){
        $('#targetDiv').toggle();
    });
});

PHP:

echo”；
回声“；

正如您所见，$ctr有助于个性化每个链接和div，但我需要java来识别单击的是哪个#toggleDiv，从而允许它切换正确的#targetDiv

---

有什么帮助吗？

一种幼稚、低效但可用的方法如下：

var i = 0;
while ($('#toggleDiv' + i).length) {
    (function () {
        // Copy the iteration variable, otherwise all of the links will toggle
        // the *last* targetDiv instance!
        var copy = i;

        $('#toggleDiv' + copy).click(function () {
            $('#targetDiv' + copy).toggle();
        });
    })();

    ++i;
}

更好的方法是使用相同的CSS类标记所有切换链接div，然后将相同的单击处理程序应用于所有这些div（

$（'.toggle link'）。单击（…）

）。此处理程序应查看目标元素的ID并提取编号，然后找到匹配的

targetDiv

实例并将其切换。使用这种方法，您将只注册一个事件处理程序

---

在代码中给出的方法，每个触发器div都有一个事件处理程序，如果有数千个这样的链接，这可能会在浏览器中引起内存问题。对于少量的链接，可能是很好的，但是如果您可能有很多链接，请考虑一个不同的方法。

< P>向所有链接WH添加一个点击事件侦听器。ose id属性以

toggleDiv

开头。在事件句柄函数中，提取

toggleDiv

之后的子字符串，查找id为

targetDiv

的div，并切换它：

$('a[id^=toggleDiv]').click(function() {
    var id = $(this).attr('id');
    var number = id.substring('toggleDiv'.length);
    $('#targetDiv' + number).toggle();
});

---

“如果您正确地构造html和jQuery选择器，则不需要所有这些元素都有自己的ID；它们可以共享所有类

类似的内容可以在父/子设置中使用：

 $(".question").click(function() {
    $(this).parent().children(".answer").toggle();
  });

PHP

PHP

echo'；
回声'；

ID实际上不会包含

$

——它是OP的PHP变量的开头。为什么

jQuery（）

而不是

$（）

别名？没有很好的理由，是从我的无冲突解决方案复制的。修复了。我尝试了你的两个设置，但似乎都不起作用-应该“回答”吗“div必须在父div内还是在父div外？@OmairVaiyani我用一个小补丁和一个工作小提琴的链接更新了我的答案。

 $(".question").click(function() {
    $(this).parent().children(".answer").toggle();
  });

echo '<div class="some-parent">';
echo '<a href="javascript:void(0);" class="question">question</a>';
echo '<div class="answer" style="display:none;">';
echo 'answer';
echo '</div>';

jQuery('.question').click(function(){
    if ($(this).next().css("display") == "none") {
      $(this).next().attr('style', 'display: block !important');
    } else {
      $(this).next().attr('style', 'display: none !important');
    }
  });

echo '<a href="javascript:void(0);" class="question">';
echo '<div class="answer" style="display:none;">';