当另一个元素 (class) 为 display:none 时隐藏 .innerHTML；

Question

我试图在某些元素 class = 显示 none 时隐藏 innerHTML "Welcome,"（class = 欢迎文本）文本；下面是我的代码

// Redesign of the login button 
jQuery(document).ready(function ($) {
$("#siteNavBar_ctl00_btnLogin").removeClass("saml-login-button").addClass("btn btn-primary");


 $(".top-nav-bar .nav-container .main-nav-submenu-container .user-login").css({
  'position': 'relative',
  'top' : '-60px',
  'right': '0px',
  });
  
  /*
  $(".iconss").click(function() {
    window.location = "http://google.com";
 });
 */
  $(".secondicon").click(function() {
    window.location = "http://www.facebook.com";
 
 
});



var newNode = document.createElement('div');
var referenceNode = document.querySelector('#siteNavBar_loginToggle');
newNode.className = "username-displayed";
newNode.innerHTML='<span class="welcome-text">Welcome,</span>';
referenceNode.parentNode.insertBefore(newNode, referenceNode);



$( ".username-displayed" ).append( $( ".user-name" ) );




});
$(function(){
  $('dl.portletSectionJump dd a:contains("Custom Info")').hide();  
});

我只需要在 class .d-block 设置为显示时隐藏它：none;

** 请注意 VAR NEWNODE 部分。我是 Javascript 的新手，所以我很抱歉有些事情不是很清楚。

Answer 1

我不确定你的代码中发生了什么，但这是你想要的 if 语句

if ($('.d-block').css('display') == 'none') {
  $('.welcome-text').hide()
}

Answer 2

你需要检查你的元素是否被隐藏，然后你隐藏你的 div

if($('.d-block').is(':hidden')){
    $('.welcome-text').hide();
}

Answer 3

这是相同的工作代码，

function hide() {
    $(".d-block").hide();
}

function show() {
    $(".d-block").show();
}

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
        var value = $(".d-block").css("display");
        console.log(value);
        if (!value || "none" === value) {
            $(".welcome-text").hide();
        } else {
            $(".welcome-text").show();
        }
    });    
});

var target = document.getElementsByClassName('d-block')[0];
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span class="welcome-text">Welcome, </span>User</h1>
<hr/>
<div>
    <p>Lorem</p>
</div>
<div>
    <p class="d-block">Lorem Imsum</p>
</div>
<button onClick="hide()">Hide</button><button onClick="show()">Show</button>

MutationObserver 参考来自 this 答案。

当另一个元素 (class) 为 display:none 时隐藏 .innerHTML；

Hiding .innerHTML when another element (class) is display:none;

html

javascript

css

jquery

innerhtml