如何在两个分离(但相似)的元素上使用相同的函数?

Question

我写了jQuery函数，通过切换类来显示/隐藏div。下面的代码基本上可以工作。我无法做的是分别控制每个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

代码中的一个问题是，你有两个div 的 idsub_container在 HTML 中，ID 不应该在同一页面上重复使用，它们应该是单个元素的唯一标识符。

但是，仅自行更改此设置并不能解决您的问题:)

$("#sub_container")太通用了，它会在整个 DOM 中搜索具有此 ID 的元素，但您要做的是在您刚刚单击的div 组中搜索。您可以使用siblings.我已经更新了您发布的演示以执行此操作。

必须进行一些更改。

首先，我们需要知道单击了哪个元素。为此，我将链接onclick="_open()"更新为onclick="_open(event)"这在调用时传递单击事件，我们可以使用它来确定单击了哪个元素。(您也可以使用this来简单地传递元素，但由于您经常看到事件被传递，所以我选择这样做(

接下来我们需要找到相关的子容器。那就是这一行：

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

我正在使用事件的当前目标(例如，绑定为单击的元素(，然后搜索具有类的同级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/