javascript - 显示另一个元素(类)时隐藏 .innerHTML :none;

标签 javascript jquery html css innerhtml

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 5 年前

当某个元素 class = display none 时,我试图隐藏 innerHTML“Welcome”(class = welcome-text)文本;下面是我的代码

// 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回答。

关于javascript - 显示另一个元素(类)时隐藏 .innerHTML :none;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50649474/

上一篇:css - 如何在 css 中制作响应式 45 度图像叠加层

下一篇:html - 带边距和不同嵌套的宽度百分比

相关文章:

javascript - Three.js 三 Angular 形未绘制

javascript - jQuery - 如果任何单元格包含 X 和 Y 之间的值,则删除表格行

jquery - 从 Bootstrap 表中动态添加的元素获取元素值

javascript - 为什么当我使用 .style.display = "block"时元素的位置会改变?

html - 绝对位置,右上角(调整大小)

php - html 表并用带有空行的 php 填充

javascript - 在屏幕阅读器中移动光标

javascript - 如何使图像内的文本可选择?

javascript - 单击一个元素然后执行其他相同的单击事件?

javascript - jQuery 显示 div 不起作用