当另一个元素（类）为 display:none 时隐藏 .innerHTML； [关闭]

Posted 2023-05-07

【中文标题】当另一个元素（类）为 display:none 时隐藏 .innerHTML； [关闭]

【英文标题】：Hiding .innerHTML when another element (class) is display:none; [closed]

【发布时间】：2018-11-11 22:52:05

【问题描述】：

当某些元素 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();  
);

仅当类 .d-block 设置为 display: none; 时才需要隐藏它；

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

【问题讨论】：

这个***.com/questions/178325/…的可能重复

【参考方案1】：

这是相同的工作代码，

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 答案。

【讨论】：

嗨，当我这样做时，仍然显示类欢迎文本？

不，如果你隐藏 d-block 类元素，那么 welcome-text 类将被隐藏 @SeanWatkins - 你可以运行并检查输出

对不起，我弄错了，你是 100% 正确的。太感谢了！我希望有一天能和你一样优秀.. 10 年后我敢肯定！

【参考方案2】：

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

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

【讨论】：

我使用了这段代码，但它仍然显示欢迎文本类？

你能展示你的代码吗？

【参考方案3】：

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

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

【讨论】：

代码顶部的 hide() 和 show() 函数无用，可能会与 jquery 的同音异义函数混淆！