jQuery:循环为多个命名为数字的类重复切换显示/隐藏

Question

这是一个奇怪的问题，用言语表达道歉。

我正在制作一个有多个数据点的时间线的网站。在单击时，每个datapoint将打开一个唯一的弹出窗口，其内容与该数据池相对应。

如果我要在数字上命名每一个数据点，比如". datapoint -1“". datapoint -2”和so-4，我是否可以编写一个jQuery循环来代替为每个datapoint和相应的弹出窗口创建一个单独的单击函数？

现在我只是在显示和隐藏div(我知道lightbox是另一种方法，但我这样做是为了获得原型/学习经验)

下面是第一个弹出窗口的代码示例：

      $('.datapoint').click(function(){
    $(".popout").toggle();
  });

提前感谢！

Answer 1

我将使用的是类和自定义属性的组合，如

​

$('.datapoint').click(function() {
  var popout = $(this).data('popout');
  $(".popout-" + popout).toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="datapoint" data-popout="1">1</div>
<div class="popout popout-1">p-1</div>
<div class="datapoint" data-popout="2">2</div>
<div class="popout popout-2">p-2</div>

​

在这里可以看到，类datapoint被用于具有单击处理程序(或者您可以使用attribtue选择器'div[data-popuot]'来定位元素)，然后属性data-popout用于针对特定的popout元素。

Answer 2

如果您的javascript位于.php文件中，您只需在php中编写一个for循环，如下所示：

<script>
<?
for ($x=0; $x<=10; $x++) {
echo "$(\'.datapoint-".$x."\').click(function(){";
echo "$(\".popout\").toggle();";
echo "})\;";
} 
?>
</script>

我没有检查我的语法，但我希望这能给你一个想法。也许有一种替代的、纯粹的javascript方式来实现它，但我不知道它在我的头顶上是什么。