jQuery如何根据点击的内容获取元素id并获取子元素Id [英] jQuery How to get element id based on what was clicked AND get child element Id

问题描述

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

So I have a strange set-up I'm trying to figure out how to get the result I have in my head. I feel like I am very close I just don't know 100% how jQuery operates. I have applied everything into this JSFiddle Basically, I have five or so section elements. Inside of each of those sections is another section.

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

The outer section is simply given an id of "outerSect" and then the name of that section such as: "outerSectLogo" (and there is a "outerSect" class that defines some css elements but I don't think that would help me here. Or would it?)

内部部分是，你猜对了，innerSectLogo

The inner section is, you guessed it, "innerSectLogo"

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

The goal is to have the innerSections hidden until the user clicks on the outer Section. They are basically categories of a sort and information is stored in each category. I don't want a page full of information. I want the user to choose what information they want, click on it, and then that information appears.

目前我有这样的代码：

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

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

which works GREAT! Except that I have like five other ones I have to do. Now I can "hard code" all of these, simply duplicating this code over and over again just replacing the "outerSectLogo: with "outerSectCovers" and so and so forth with whatever unique name I have for that category.

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

I'm trying to find a way to be cleaner. Since each section has similar IDs: outerSectLogo outerSectCovers outerSectBook outerSectAd and so on. The inner sections have the same IDs respectively innerSectLogo innerSectCovers and so on.

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

I am figuring there is a way where the ID can be capture based upon what the user clicks. Something like

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

其中logoin：revealSection（logo）指的是部分ID。那么logo可以某种方式插入到jQuery代码中，如

where that "logo" in : "revealSection(logo)" refers to the section ID. Then that "logo" can be inserted into the jQuery code in some fashion like

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

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

where x is what was in the () of the revealSection, in this case "logo"

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

I know this is confusing. But I feel like I am on to something. I am generally new to jQuery and would appreciate the help. https://jsfiddle.net/usL0uybx/

推荐答案

逻辑是合理的，但是你没有使用导致重复的jQuery的强大功能。由于它们都具有类似于标题的目的而不是包含隐藏的跨度，因此您希望使用常见的类将它们全部定位，以消除代码中已有的冗余。这应该处理所有事情。

The logic is sound, but you're not using the power of jQuery which is causing the duplication. Since they all serve a similar purpose of a header than contains a hidden span, you want to target them all with a common class to remove the redundancy which you already have in your code. This should handle everything.

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

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

It also looks like there was an error in your HTML causing problems. I fixed it with the correct jQuery here https://jsfiddle.net/xgp0txzz/

这篇关于jQuery如何根据点击的内容获取元素id并获取子元素Id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！