当单击容器 div 时,我试图更改容器 div 元素的类以及嵌套在其中的几个 div 元素。我可以成功更改容器元素的类 (case_study_section),但不知道如何定位嵌套(子)div 元素(case_study_images、case_study_image1、..)。请帮忙。
P.S.:我需要向不同的子元素添加不同的类。因此,我们将分别针对它们。
function expandCollapse(case_study_section) {
var sectionClasses = case_study_section.classList;
var imagesClasses = case_study_section.getElementsByClassName('case_study_images').classList;
if (sectionClasses.contains("collapsed_section")) {
sectionClasses.remove("collapsed_section");
sectionClasses.add("expanded_section");
} else {
sectionClasses.remove("expanded_section");
sectionClasses.add("collapsed_section");
}
}
.case_study_section {
width: 100px;
height: 100px;
}
.collapsed_section {
background-color: #ff0000;
}
.expanded_section {
background-color: #000000;
}
<div class="case_study_section collapsed_section" onClick="expandCollapse(this)">
<div class="case_study_images collapsed_images">
<div class="case_study_image1">
</div>
<div class="case_study_image2">
</div>
<div class="case_study_image3">
</div>
</div>
</div>
最佳答案
如果您的 parent 正在寻找一些 child ,您可以:
var elements = case_study_section.querySelectorAll('.case_study_images');
Array.from(elements).forEach(function (child) {
child.classList.add('a-class');
})
只需使用常规的 CSS 选择器即可。
如果您需要为不同的 child 添加不同的类(class),您可以:
//somehow map the selector to the classes
//here the object key is the selector,
//the value the classes
var map = {
'.case_study_image1': ['a-class', 'b-class'],
'.case_study_image2': ['c-class']
};
//iterate over the keys
Object.keys(map).forEach(function (selector) {
//get the classes
var classes = map[selector],
//get the element
element = case_study_section.querySelector(selector),
//get the classList
cl = element.classList;
//apply all at once
cl.add.apply(cl, classes);
});
关于JavaScript - 如何定位使用 "this"传递的 div 中的嵌套(子)div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44260548/