如何通过使用“类”而不是“ id”来使用多个浮动帮助对话框？

如何解决如何通过使用“类”而不是“ id”来使用多个浮动帮助对话框？

| 我需要在页面中使用多个浮动帮助对话框。我已经尝试使用\'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的\“ next \\”功能，但是由于在放置帮助图标和帮助文本的区域之间有很多层（div / p / span），因此这是有问题的。任何想法或更好的方法来解决这个问题？提前致谢。

解决方法

我不太确定我是否了解您要查找的内容，但是您可以一步设置所有点击处理程序，并在处理程序中将每个处理程序都引用给自己：

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

,您可以将其他类名称添加到元素。默认情况下，可以隐藏div，并且可以将新的类附加到其上-以“覆盖”先前的样式（因此，名称为“层叠样式表”）

<div class=\"hidden exception\"></div>

如果单击了元素，则可以像这样添加新的类名：

 $(\'.target\').addClass(\'newclass\');

更多信息： http://api.jquery.com/addClass/ ,我尚未使用JQuery完成此操作，但是您需要的是“不引人注目的javascript”。它确实通过使用类来完成。假设您有全部要突出显示的图像：

<img src=\"pic1.png\" onMouseover=\"this.src=\'hi_pic1.png\';\" />

所以他们都有相同的行为。给他们上课：

<img src=\"pic1.png\" class=\"hi\" />

然后，在加载时，在页面末尾的脚本中，以yahoo风格，您将初始化写入 -抓住班上的每一个要素 -添加您想要的事件 -将事件设置为使用适当的数据，例如通过使用此名称以及使用诸如pic1-> hi_pic1之类的系统名称。希望这可以帮助，查尔斯 ,您是否尝试过jQuery .each函数？编辑：像下面

$(\".help-icon\").each(function(idx,elm){
    elm.click(function(){
      ...
    })
});

,如果所有帮助图标都具有相同的类，则可以使用jQuery的each函数遍历它们，检索关联的ID，将ID中的“图标”替换为“详细信息”（因此＃help-icon3会变成＃help-detail3），然后使用它来更新面板。就像是：

$(\".help-icon\").each(function() {
    var detailsId = $(this).attr(\"id\").replace(\"icon\",\"details\");
    $(\"#\" + detailsId).css(\'display\',\'block\');
});

,我们只是出于某种未知原因而需要使用ID的ASSUME。这是您共同努力的答案：

$(\"#help-icon1\").add(\"#help-icon2\").add(\"#help-icon3\").click(function() {
    $(this).css(\'display\',\'block\');
});

等于：

$(\"#help-icon1,#help-icon2,#help-icon3\").click(function() {
    $(this).css(\'display\',\'block\');
});

但是，实际上，如果没有很好的理由，您不需要使用这样的唯一ID。