javascript - 当另一个元素(类)为 display:none 时隐藏 .innerHTML;
问题描述
当某个元素类=显示无时,我试图隐藏innerHTML“欢迎”(类=欢迎文本)文本;下面是我的代码
// 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 新手,所以我很抱歉有些事情不是很清楚。
解决方案
这是相同的工作代码,
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 answer。
推荐阅读
- c# - Rider 无法解析 nameof(OtherClass.Method)
- asp.net - ASP .NET Core 如何使用主键值获取 userId 值?
- r - 包或命名空间加载失败
- neo4j - Neo4j 中的关系
- mysql - 用户''@'localhost'的访问被拒绝(使用密码:NO)-NodeJs/MySQL
- javascript - 如何在 pdf 套件表中添加空间?
- c - 找到数组中最大的 n 个元素
- microsoft-edge - 仅请求 activeTabs 权限时,EdgeChromium 扩展 chrome.tabs.query 失败
- python - Matplotlib 模块在 Ubuntu 18.04 的 Python3.6.9 中未找到错误
- python-3.x - Python:如何通过 Selenium 使用 find_element_by_css_selector