jQuery 如何根據點擊的內容獲取元素 ID 並獲取子元素 ID

Question

所以我有一個奇怪的設置，我試圖弄清楚如何獲得我腦海中的結果。 我覺得我很接近我只是不知道 100% jQuery 是如何運作的。 我已經將所有內容應用到這個JSFiddle基本上，我有五個左右的部分元素。 每個部分的內部是另一個部分。

外部部分只是簡單地給出了“outerSect”的 id，然后是該部分的名稱，例如：“outerSectLogo”（並且有一個定義一些 css 元素的“outerSect”類，但我認為這對我沒有幫助. 或者會嗎？）

內部部分是，你猜對了，“innerSectLogo”

目標是隱藏innerSections，直到用戶單擊外部Section。 它們基本上是一種類別，信息存儲在每個類別中。 我不想要一個充滿信息的頁面。 我希望用戶選擇他們想要的信息，點擊它，然后該信息出現。

目前我有這個代碼：

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

這很好用！ 除了我還有其他五個我必須做的事情。 現在我可以“硬編碼”所有這些，只需一遍又一遍地復制此代碼，只需將“outerSectLogo: 替換為“outerSectCovers”等等，並使用我對該類別的任何唯一名稱。

我正在努力尋找一種更清潔的方法。 由於每個部分都有相似的 ID：outerSectLogo outerSectCovers outerSectBook externalSectAd 等等。 內部部分具有相同的 ID，分別為 innerSectLogo、innerSectCovers 等。

我想有一種方法可以根據用戶單擊的內容捕獲 ID。 就像是

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

其中：“revealSection(logo)”中的“徽標”是指部分 ID。 然后可以將“標志”以某種方式插入到 jQuery 代碼中，例如

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

其中 x 是在revealSection 的 () 中的內容，在本例中為“徽標”

我知道這令人困惑。 但我覺得我正在做某事。 我通常是 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'});
})