Question

我需要在页面中使用多个浮动帮助对话框。我通过使用'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');
});

Answer 2

您可以为元素添加其他类名。

默认情况下可以隐藏div，并且可以附加一个新类 - “覆盖”前一个样式（因此名称为层叠样式表）

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

如果单击某个元素，则可以附加一个新的类名，如下所示：

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

更多信息：
http://api.jquery.com/addClass/

Answer 3

您是否尝试过jQuery .each功能？

编辑：如下所示

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

Answer 4

我没有使用JQuery，但你需要的是“不引人注目的javascript”。

它通过使用类完成。假设您有想要突出显示的图像：

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

所以他们都有相同的行为。给他们一个班级：

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

然后在加载时，在页面末尾的脚本中，雅虎风格，你写一个初始化到 - 抓住班上的每一个元素 - 添加您想要的事件 - 设置事件以使用适当的数据，例如通过使用它并使用系统名称，如pic1 - ＆gt; hi_pic1。

希望这有帮助，查尔斯

Answer 5

如果你的所有帮助图标都有相同的类，你可以使用jQuery的each函数循环遍历它们，检索相关的id，用id中的“detail”替换“icon”（所以＃help-icon3将成为＃help-detail3），然后使用它来更新面板。类似的东西：

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

Answer 6

让我们假设您需要使用ID，原因不明。以下是您共同努力的答案：

$("#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。

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

6 个答案: