[英]Traversing to specific children - jQuery/Javascript
我有下面給出的以下DOM結構,並且我想在兩種情況下都使用超鏈接按鈕(a)。 我已經使標題的(header1和recordHeader1)都可以單擊(cursor:pointer)。 因此,如果我單擊header1或recordHeader1中的(名稱,job_title)任何地方說(例如,如果我單擊headerTitle),我想找到超鏈接按鈕並執行某些單擊功能。 這些場景可能更多,但是在所有場景中,都有一個父標頭,如下所示,並且父標頭在DOM中始終具有超鏈接元素。 請讓我知道我在做什么錯。
方案1:
<div class="header1">
<a href="#" class="downArrow k-icon k-minus"></a> <!-- This element -->
<img class="foundIcon" src="https://google.com">
<div class="headerTitle">Contacts</div>
</div>
方案2:
<div class="recordNew">
<div class="recordHeader1">
<ul>
<li>
<div class="arrowContainer">
<a href="#" class="downArrow k-icon k-minus"></a> <!-- This element -->
</div>
</li>
<li>
<div class="nameContainer">
<span class="name">John Doe </span>
</div>
</li>
</ul>
</div>
<span class="job-title">Marketing Professional </span>
</div>
</div>
我嘗試了什么?
// This is a generic function that makes the header clickable based on any element click
function makeRowClickable() {
$(".headerTitle, .name, .job_title, .foundIcon").on("click", function(e) {
// doesn't seem to work and find the correct element
console.log($(e.target).closest(".header1").find(".downArrow"));
});
}
嘗試這個
const headerClick = (e, header, downArrow) => {
// programatically click on the anchor tag
downArrow.click();
}
// get all .header1 elements
[...document.querySelectorAll('.header1')]
// add all .recordHeader1 elements to the array
.concat([...document.querySelectorAll('.recordHeader1')])
// add event listener on each .header1 and .recordHeader1
.forEach((header) => header.addEventListener('click', (e) => {
// inside the click handler send the event, the header element, and its child downarrow element
headerClick(e, header, header.querySelector('.downArrow'))
}));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.