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

Question

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

我正在制作一个具有多个数据点的时间线的网站。单击时，每个数据点将打开一个独特的弹出窗口，其中包含与该数据点对应的内容。

如果我要以数字方式命名每个数据点，例如“.datapoint-1”“.datapoint-2”等等，我可以编写一个 jQuery 循环来代替为每个数据点创建单独的单击函数吗？相应的弹出窗口？

现在我只是显示和隐藏 div(我知道灯箱将是一种替代方法，但我这样做是为了原型(prototype)设计/学习经验)

以下是第一个弹出窗口的代码示例:

      $('.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用于具有点击处理程序(或者您可以使用属性选择器 'div[data-popuot]' 来定位元素)，然后是属性 data-popout用于定位特定的popout元素