JavaScript - 如何在使用「this」傳遞的div內定位嵌套（子）div？

Question

我試圖改變一個容器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; 
 
    
 
\t 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>

Answer 1

那麼如果你有家長正在尋找一些孩子，您可以：

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); 
}); 

Answer 2

您可以嘗試使用var children = this.getElementsByTagName("div").getElementsByTagName("div")，然後做的東西與由

Answer 3

返回的元素與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; 
 
    
 
\t 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>