[英]JavaScript - How to target nested (child) div within a div which was passed using “this”?
我试图更改容器div元素的类,并在单击容器div时更改嵌套在其中的一些div元素。 我可以成功更改容器元素(case_study_section)的类,但是不知道如何定位嵌套的(子)div元素(case_study_images,case_study_image1 ..)。 请帮忙。
PS:我需要为不同的子元素添加不同的类。 因此将分别针对他们。
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>
好吧,如果您的父母要寻找一些孩子,您可以:
var elements = case_study_section.querySelectorAll('.case_study_images');
Array.from(elements).forEach(function (child) {
child.classList.add('a-class');
})
只需使用常规的CSS选择器即可。
如果需要为不同的孩子添加不同的类,则可以:
//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);
});
您可以尝试使用var children = this.getElementsByTagName("div").getElementsByTagName("div")
,然后使用该子元素返回的元素进行处理
和children
尝试
case_study_section.getElementsByClassName('case_study_images')[0].children
或 x.getElementsByClassName()\\[0\\]
case_study_section.getElementsByClassName('case_study_images')[0].getElementsByClassName('images classname')[0]
function expandCollapse(case_study_section) { var sectionClasses = case_study_section.classList; var imagesClasses = case_study_section.getElementsByClassName('case_study_images').classList; console.log(case_study_section.getElementsByClassName('case_study_images')[0].children) 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.