這個 div ( ads) 在我的播放器里面。它最初（在頁面加載時）沒有任何attribute，但是當單擊關閉按鈕時，它通過將style="display: none".
我需要做的是檢測何時div ads獲得display:block隱藏div hidens.
問題接縫是，當div ads獲得屬性時，style="display: block"我的 jquery 代碼沒有檢測到它，因此可以將div hidensfrom的屬性更改style="display: block"為style="display: none"
這是我的代碼：
（重要：它應該適用于桌面和移動設備）
<body class="view">
<div class="ads" id="ads">
<div class="close_ads" id="ads_close"></div>
<!-- div ads content and close button here... -->
</div>
<div id="hover_vid" class="fade"><div class="hidens"><button id="close_ho" style="margin-left:5px;float:right;border-color: #fff;" class="button-yes" type="submit" onclick="hide();">X</button>?? content here ??</div></div>
<script>
function hidethis(){ document.getElementById("hover_vid").style.display="none"; };
$(".view").click(function(){
if($("#ads").css("display") == "block" ){
$(".hiden").css("display", "none");
} else if ( $("#ads").css("display") == "none" ) {
$(".hidens").css("display", "block");
} else {
}
});
</script>
</body>
uj5u.com熱心網友回復：
你的例子有點不清楚。考慮以下示例。
$(function() {
$("#close_ho").click(function() {
$(this).closest("#hover_vid").fadeOut("fast", function() {
$("#ads.hidden").removeClass("hidden");
});
});
});#hover_vid {
margin-top: 30%;
border: 1px solid black;
padding: 2em;
}
#close_ho {
margin-left: 5px;
float: right;
border-color: #fff;
}
.hidden {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ads hidden" id="ads">
<div class="close_ads" id="ads_close"></div>
<div class="view ad">Ad 1</div>
</div>
<div id="hover_vid" class="fade">
<div class="hidens"><button id="close_ho" class="button-yes" type="submit">X</button>content here</div>
</div>假設廣告已打開并顯示，當點擊 X 時，廣告將隱藏并顯示廣告串列。
uj5u.com熱心網友回復：
突變觀察者
MutationObserver 介面提供了監視對 DOM 樹所做更改的能力。
document.getElementById('ads_close').addEventListener('click', e => {
document.getElementById('ads').style.display = 'none';
});
function hide() {
}
const ads = document.getElementById('ads');
const config = { attributes: true };
const observer = new MutationObserver(() => {
if (getComputedStyle(ads).display === 'none') {
console.log('display: none');
document.querySelector('.hidens').style.display = 'none';
}
});
observer.observe(ads, config);.ads { padding-bottom: 50px; }<div class="ads" id="ads">
<div class="close_ads" id="ads_close">Click to Close</div>
<!-- div ads content and close button here... -->
</div>
<div id="hover_vid" class="fade"><div class="hidens"><button id="close_ho" style="margin-left:5px;float:right;border-color: #fff;" class="button-yes" type="submit" onclick="hide();">X</button>?? content here ??</div></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/364149.html