Question

所以我有一个奇怪的设置我正试图弄清楚如何得到我脑子里的结果。我觉得我非常接近我只是不知道jQuery如何运作。我已将所有内容应用到此JSFiddle 基本上，我有五个左右的部分元素。每个部分的内部都是另一部分。

外部部分简单地给出了“outerSect”的id，然后是该部分的名称，例如：“outerSectLogo”（并且有一个“outerSect”类定义了一些css元素，但我认为不会帮助我。或者它会吗？）

你猜对了内部部分是“innerSectLogo”

目标是隐藏innerSections，直到用户点击外部。它们基本上是一种类别，信息存储在每个类别中。我不希望页面充满信息。我希望用户选择他们想要的信息，点击它，然后显示该信息。

目前我有这段代码：

    $("#outerSectLogo").click(function() {
$("#innerSectLogo").css({'visibility' : 'visible', 'display' : 'inline'});
});

哪作得好！除了我还有其他五个我必须做的事情。现在我可以“硬编码”所有这些，简单地一遍又一遍地重复这个代码，只需用“outerSectCovers”替换“outerSectLogo：with outerSectCovers”，依此类推我用该类别的任何唯一名称。

我正试图找到一种更清洁的方法。由于每个部分都有类似的ID： outerSectLogo outerSectCovers outerSectBook outerSectAd 等等。内部部分分别具有相同的ID innerSectLogo innerSectCovers 等等。

我认为有一种方法可以根据用户点击的内容捕获ID。像

这样的东西

<section id="outerSectLogo" onClick="revealSection(logo)">

其中“logo”：“revealSection（logo）”是指部分ID。然后可以以某种方式将“logo”插入到jQuery代码中，例如

$("#outerSect" + 'x').click(function() {

其中x是revealSection的（）中的内容，在本例中为“logo”

我知道这很令人困惑。但我觉得我正在做些什么。我通常是jQuery的新手，非常感谢帮助。 https://jsfiddle.net/usL0uybx/

Answer 1

逻辑是合理的，但你没有使用导致重复的jQuery的强大功能。由于它们都具有与包含隐藏范围的标题类似的用途，因此您希望使用公共class将它们全部定位，以删除代码中已有的冗余。这应该处理所有事情。

$(document).ready(function(){
   $(".workSect").click(function() {
       $(this).find(".innerSect:first").css({'visibility' : 'visible', 'display' : 'inline'});
    });
});

看起来你的HTML中出现了错误导致问题。我在这里使用正确的jQuery https://jsfiddle.net/xgp0txzz/

修复了它

Answer 2

因此，使用类而不是id并使用find来获取被单击的元素内部的子元素。

$(".outerSectLogo").click(function() {
    $(this).find(".innerSectLogo").css({'visibility' : 'visible', 'display' : 'inline'});
});

Answer 3

我认为你可以做的是为所有外部元素分配一个公共类，如

<div id="outerSectLogo" class="innerdisplay <other-classes>"></div>

然后

$('.innerdisplay').click(function(){
    $("#" + this.id.replae('outer', 'inner')).css({'visibility' : 'visible', 'display' : 'inline'});
})

jQuery如何根据点击的内容获取元素ID并获取子元素ID

3 个答案: