detect what css attributes are on div to change other div attributes-CodePudding

This div (ads) is inside my player. It initially (on page load) doesn't have any attribute, but when the close button is clicked, it closes the div by attributing the style="display: none".

What I need to do is to detect when the div ads gains the atribute display:block to hide the div hidens.

The problem seam's to be that when the div ads gains the attribute style="display: block" my jquery code doesn't detect it so that can change the atribute of the div hidens from style="display: block" to style="display: none"

This is my code:

(Important : It should work on desktop and mobile devices)

<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>

CodePudding user response：

Your example is a little unclear. Consider the following example.

$(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>

Assuming an ad is open and on display, when the X is clicked, the ad is hidden and the list of Ads is shown.

CodePudding user response：

MutationObserver

The MutationObserver interface provides the ability to watch for changes being made to the DOM tree.

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>