如何在兩個分離（但相似）的元素上使用相同的功能？

Question

我寫了通過切換類來顯示/隱藏div的jQuery函數。 下面的代碼基本上可以正常工作。 我無法做的是分別控制每個div。 單擊第二個div組將觸發第一個。 如何區分每個元素，並使相同的功能對兩個組獨立發揮作用？

 function _open() { var nextDiv = $("#sub_container").find("[class]").map(function() { return this.className; }).get(); $.unique(nextDiv).forEach(function(c) { $('.' + c).first().removeClass('close').addClass('open'); }); } function _close() { $('.open').not('.close').each(function(key, elm) { setTimeout(function() { $(elm).removeClass('open').addClass('close'); }, key * 100); }); } 

 .container { float: left; display: inline; } .starter { display: block; width: 300px; height: 100px; background-color: red; margin-right: 10px; margin-bottom: 10px; color: white; } .open { display: block; width: 300px; height: 100px; background-color: blue; margin-bottom: 10px; color: white; } .close { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="project1" class="container"> <div class="starter" onclick="_open();">Each click will show a new div</div> <div id="sub_container"> <div class="close">1</div> <div class="close">2</div> <div class="close">3<br><br><button onclick="_close();">click here to hide all divs</button></div> </div> </div> <div id="project2" class="container"> <div class="starter" onclick="_open();">Each click will show a new div</div> <div id="sub_container"> <div class="close"></div> <div class="close"></div> <div class="close"><button onclick="_close();">click here to hide all divs</button></div> </div> </div> 

Answer 1

您的代碼中的一個問題是，您有兩個帶有HTML中id為sub_container div，ID不應在同一頁面上重復使用，它們是單個元素的唯一標識符。

但是，僅自行更改將無法解決您的問題:)

$("#sub_container")過於籠統，它會在整個DOM中搜索具有該ID的元素，但是您要在剛剛單擊的div組中進行搜索。 您可以使用siblings來完成此操作。 我已經更新了您發布的演示程序。

必須進行一些更改。

首先，我們需要知道單擊了哪個元素。 為此，我將鏈接onclick="_open()"為onclick="_open(event)"這會在調用時傳遞click事件，我們可以使用該事件來確定單擊了哪個元素。 （您也可以使用this來簡單地傳遞元素，但是由於最常見的情況是您看到事件正在傳遞，因此我選擇與此一起使用）

接下來，我們需要找到相關的子容器。 那是這行：

var $subContianer = $(e.currentTarget).siblings(".sub_container");

我正在使用事件的currentTarget（例如，單擊綁定的元素），然后使用sub_container類搜索同級

老實說，您的下一部分代碼對我來說似乎很奇怪，但我還是將其保留在原地。 我認為這可以更簡單地完成。 但是我更新了它以使用$subcontainer.find來搜索要打開的div，而不是通用的$(selector) （由於與以前相同的“通用”原因）

我沒有更新結束代碼，我認為對您來說，嘗試這些原理並自己弄清楚這些點將是一個不錯的練習：)

祝好運！

 function _open(e) { var $subContianer = $(e.currentTarget).siblings(".sub_container"); var nextDiv = $subContianer.find("[class]").map(function() { return this.className; }).get(); $.unique(nextDiv).forEach(function(c) { $subContianer.find('.' + c).first().removeClass('close').addClass('open'); }); } function _close() { $('.open').not('.close').each(function(key, elm) { setTimeout(function() { $(elm).removeClass('open').addClass('close'); }, key * 100); }); } 

 .container { float: left; display: inline; } .starter { display: block; width: 300px; height: 100px; background-color: red; margin-right: 10px; margin-bottom: 10px; color: white; } .open { display: block; width: 300px; height: 100px; background-color: blue; margin-bottom: 10px; color: white; } .close { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="project1" class="container"> <div class="starter" onclick="_open(event);">Each click will show a new div</div> <div class="sub_container"> <div class="close">1</div> <div class="close">2</div> <div class="close">3<br><br><button onclick="_close();">click here to hide all divs</button></div> </div> </div> <div id="project2" class="container"> <div class="starter" onclick="_open(event);">Each click will show a new div</div> <div class="sub_container"> <div class="close"></div> <div class="close"></div> <div class="close"><button onclick="_close();">click here to hide all divs</button></div> </div> </div> 

簡而言之：

• 傳遞event這樣您就可以知道點擊的起源
• 而不是通過$('selector here')搜索整個DOM，而是通過查找要從中搜索的元素，然后使用.find使其更加具體。

有關此類資料的文檔： http : //api.jquery.com/find/ https://api.jquery.com/siblings/