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

这么道歉，这是一个奇怪的问题。

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

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

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

这是仅第一个弹出窗口的代码示例：

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

提前致谢！

最佳答案

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

$('.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元素

关于javascript - jQuery:循环以重复切换显示/隐藏多个以数字命名的类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26856868/