0

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

JavaScript：

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

PHP：

echo "<a href=\"javascript:void(0);\" id=\"toggleDiv$ctr\">;
echo "<div id=\"targetDiv$ctr\" style=\"display:none;\">";

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

有什么帮助吗？

4

3 回答 3

1

'如果你正确地构建你的 html 和 jQuery 选择器，你不需要所有这些元素都有自己的 ID；他们可以都共享课程。

这样的事情可以在父/子设置中起作用：

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

PHP

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>';

这是一个小提琴：http: //jsfiddle.net/VPCcZ/1/

或者在“下一个”情况下像这样：

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

PHP

echo '<a href="javascript:void(0);" class="question">';
echo '<div class="answer" style="display:none;">';
于 2012-12-26T21:51:44.943 回答
0

一种幼稚且低效但可用的方法是这样的：

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，然后将相同的点击处理程序应用于所有这些 ( $('.toggle-link').click(...))。这个处理程序应该查看目标元素的 ID 并提取数字，然后找到匹配的targetDiv实例并切换它。使用这种方法，您将只注册一个事件处理程序。

使用我在代码中给出的方法，您将为每个切换 div设置一个事件处理程序，如果您有数千个这样的链接，这可能会导致浏览器出现内存问题。对于少量的链接，它可能没问题，但如果你可能会得到很多链接，请考虑另一种方法。

于 2012-12-26T21:46:03.963 回答
0

为所有 id 属性以 . 开头的链接添加点击事件监听器toggleDiv。在事件句柄函数中，提取 之后的子字符串toggleDiv，查找具有 ID 的 divtargetDiv<extracted_number>并切换它：

$('a[id^=toggleDiv]').click(function() {
    var id = $(this).attr('id');
    var number = id.substring('toggleDiv'.length);
    $('#targetDiv' + number).toggle();
});
于 2012-12-26T21:46:10.797 回答