javascript - 如何使用 'class' 而不是 'id' 来使用多个 float 帮助对话框？

Question

我需要在一个页面中使用多个 float 帮助对话框。我已经通过使用 'display:block' 和 'display:none' 进行了尝试，并在 javascript 中使用了 ID。我不能使用类，因为我在同一页面上有多个类，如果我使用类，那么它们将同时显示/隐藏。但是，随着页面中帮助项的数量不断增加，我不得不返回 javascript 并添加更多行 ...

例如:

$(document).ready(function() { 
   $("#help-icon1").click(function() {
         $('#help-details1').css('display', 'block');
      });

   $("#help-icon2").click(function() {
         $('#help-details2').css('display', 'block');
      });

   $("#help-icon3").click(function() {
         $('#help-details3').css('display', 'block');
      });

});

它们每个都有关闭图标，如果单击该关闭图标或单击页面中的任何位置，它们应该会消失。这意味着我必须为所有不同的关闭图标编写 3 次 javascript 函数。

我试图依赖 jquery 的“下一个”功能，但由于在帮助图标所在的区域和帮助文本之间存在许多层 (div/p/span)，因此它变得有问题。有什么想法或更好的方法来解决这个问题吗？

提前致谢。

Answer 1

我不太确定我是否理解您在寻找什么，但是您可以一步设置所有点击处理程序，并让每个点击处理程序在处理程序中引用自身:

jQuery(".help-icon").click(function() {
    jQuery(this).css('display', 'block');
});