首頁猿問選中復選框時隱藏祖父母班級

選中復選框時隱藏祖父母班級

JavaScript

POPMUISE 2023-08-18 17:44:46

當選中復選框（wfob_checkbox）時，我需要隱藏下面的第一個類（wfob_wrap）。我嘗試了很多方法都沒有成功。有人能幫我解決這個問題嗎？謝謝你！<div id="wfob_wrap" class="wfob_wrap_start"> <div class="wfob_wrapper" data-wfob-id="72396"> <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396"> <div class="wfob_outer"> <div class="wfob_Box"> <div class="wfob_bgBox_table no_table"> <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container"> <div class="wfob_order_wrap wfob_content_bottom_wrap"> <div class="wfob_bgBox_table_box"> <div class="wfob_bgBox_cell wfob_img_box"> <div class="wfob_checkbox_input_wrap"> <span class="wfob_bump_checkbox"> <input type="checkbox" class="wfob_checkbox wfob_bump_product" checked=""> </span> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div></div>

查看完整描述

3 回答

吃雞游戲

TA貢獻1829條經驗獲得超7個贊

嘗試這個

它可以處理加載時選中復選框的情況

第一個用于一個復選框，第二個用于多個復選框。

const toggle = function() {

const chk = document.querySelector(".wfob_checkbox");

chk.closest(".wfob_wrapper").classList.toggle("hide", chk.checked)

};

window.addEventListener("load",function() {

document.querySelector(".wfob_checkbox").addEventListener("click",toggle)

toggle()

});

.hide { display:none; }

</span>

</div>

如果有更多集合，則不能使用 ID

window.addEventListener("load", function() {

document.getElementById("container").addEventListener("click", function(e) {

const tgt = e.target;

if (tgt.classList.contains("wfob_checkbox")) {

tgt.closest(".wfob_wrap_start").querySelector(".wfob_wrapper").classList.toggle("hide", tgt.checked)

}

});

// loading

[...document.querySelectorAll(".wfob_checkbox:checked")].forEach(tgt =>

tgt.closest(".wfob_wrap_start").querySelector(".wfob_wrapper").classList.toggle("hide", tgt.checked)

)

});

.hide {

display: none;

}

</span>

</div>

</span>

</div>

反對回復 2023-08-18

慕哥9229398

TA貢獻1877條經驗獲得超6個贊

我給出了javascript和jquery的兩種解決方案。有必要嗎？

jquery版本：

$('.wfob_checkbox.wfob_bump_product').click(function(){

if($(this).is(':checked')) {

$(this).closest('#wfob_wrap .wfob_wrapper').css('display', 'none');

}

});

</span>

</div>

JavaScript 版本：

let checkbox = document.querySelector('.wfob_checkbox.wfob_bump_product');

checkbox.onclick = function() {

if (this.checked) {

this.closest('.wfob_wrapper').style.display = 'none';

}

</span>

</div>

反對回復 2023-08-18

慕神8447489

TA貢獻1780條經驗獲得超1個贊

你可以使用這樣的東西：

document.querySelector('[type=checkbox]').addEventListener('change', e => {

? e.target.closest('#wfob_wrap').firstElementChild.style.display = 'none';

});

? <div class="wfob_wrapper" data-wfob-id="72396">

? ? <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">

? ? ? <div class="wfob_outer">

? ? ? ? <div class="wfob_Box">

? ? ? ? ? <div class="wfob_bgBox_table no_table">

? ? ? ? ? ? <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">

? ? ? ? ? ? ? <div class="wfob_order_wrap wfob_content_bottom_wrap">

? ? ? ? ? ? ? ? <div class="wfob_bgBox_table_box">

? ? ? ? ? ? ? ? ? <div class="wfob_bgBox_cell wfob_img_box">

? ? ? ? ? ? ? ? ? ? <div class="wfob_checkbox_input_wrap">

? ? ? ? ? ? ? ? ? ? ? <span class="wfob_bump_checkbox">

? ? ? ? ? ? ? ? ? ? ? ? <input type="checkbox" class="wfob_checkbox wfob_bump_product" checked="">

? ? ? ? ? ? ? ? ? ? ? </span>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? </div>

? ? ? ? ? ? </div>

? ? ? ? ? </div>

? ? ? ? </div>

? ? ? </div>

? ? </div>

? </div>

</div>

我使用.closest(..)來獲取#wfob_wrap元素，并使用 .firstElementChild來獲取該元素的第一個子元素。

在這種特定情況下，由于您要查找的元素有一個 id，因此您不需要.closest(..)，您可以直接使用來獲取該元素document.getElementById('wfob_wrap')。

反對回復 2023-08-18

3 回答
0 關注
180 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

選中復選框時隱藏祖父母班級

選中復選框時隱藏祖父母班級

3 回答

添加回答