第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

為什么js最接近的方法找不到兄弟元素?

為什么js最接近的方法找不到兄弟元素?

瀟瀟雨雨 2023-10-20 16:31:15
注意:據(jù)我所知,該closest()方法在 DOM 樹中搜索與指定 CSS 選擇器匹配的最近元素。當(dāng)我點(diǎn)擊margin兩個(gè)li元素之間的空間..它返回null...但是如果我替換margin-bottom: 15px;為padding-bottom...一切都好...CSS代碼.amenities-filters-inner ul li{     margin-bottom: 15px; }如果我單擊紅色標(biāo)記區(qū)域,則圖像..找不到兄弟li元素..示例代碼   document.querySelectorAll(".amenities-filters-inner ").forEach(function(item){    item.addEventListener("click",function(e){        e.preventDefault();        let element = null;        element = e.target.closest(".amenity_id");        // element = e.target.querySelector(".amenity_id");         element = element.children[0].children[1];         element.checked == true ? element.checked = false :  element.checked =true;               let dataId =  + element.getAttribute('data-id');        console.log(element)        console.log(dataId)           })}) .amenities-filters-inner{                    border: 2px dashed royalblue;            max-width: 300px;            padding: 1rem;        }        ul{            list-style: none;            width: 100%;            margin: 0;            padding: 0;                   }        li{            border: 2px solid rgb(133, 129, 129);            padding: 3px;        }.amenities-filters-inner:last-child{    margin-bottom: 0;}.amenities-filters-inner ul li{    margin-bottom: 20px;}.amenities-filters-inner ul li:last-child{    margin-bottom: 0;}.check {    display: flex;    align-items: center;    justify-content: space-between;    position: relative;    padding-left: 31px;    margin-bottom: 0;    padding-right: 0;    cursor: pointer;    font-size: 14px;     color: #646464;}.check  strong{    color: #969696;    font-size: 14px;     font-weight: 400;}.check input {    position: absolute;    opacity: 0;    cursor: pointer;}.checkmark {    position: absolute;    top: 0;    left: 0;    height: 17px;    width: 17px;    background-color: #fff ;    border-color: #646464;    border-style:solid;    border-width:1px;    border-radius: 2px;}
查看完整描述

2 回答

?
紅糖糍粑

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊

.closest()方法只遍歷parents,不遍歷children。

該區(qū)域位于容器中.amenities-filters-inner而不是列表元素內(nèi),因此它找不到.amenities-id.

更改容器的背景顏色以進(jìn)行調(diào)試。

.amenities-filters-inner{
  background: red;
}

如果您不希望列表項(xiàng)之間有間隙,請(qǐng)不要使用邊距。使用padding-topandpadding-bottom代替。

closest()方法遍歷 Element 及其父級(jí)(指向文檔根),直到找到與提供的選擇器字符串匹配的節(jié)點(diǎn)。將返回自身或匹配的祖先。如果不存在這樣的元素,則返回null。

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest


查看完整回答
反對(duì) 回復(fù) 2023-10-20
?
MMMHUHU

TA貢獻(xiàn)1834條經(jīng)驗(yàn) 獲得超8個(gè)贊

通過單擊紅色標(biāo)記區(qū)域內(nèi)部,您將在兩個(gè)元素之間<li>單擊,這意味著您位于該<ul>元素內(nèi)部。打電話給你帶來closest(); 您正在尋找的是元素內(nèi)部(即下方)的子元素。嘗試改變target<div><ul>

element = e.target.closest(".amenity_id");

在你的腳本中

element = e.target.querySelector(".amenity_id");

看看它是否有效。


查看完整回答
反對(duì) 回復(fù) 2023-10-20
  • 2 回答
  • 0 關(guān)注
  • 141 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)