javascript - 纯JS中的Angular ng-hide指令

在AngularJS中，您可以使用ng-hide隐藏HTML元素。您将如何使用纯JS / jQuery执行此操作？如果您有类似<div id="userNotLoggedIn"></div>的名称，它是$("#userNotLoggedIn").hide()还是$("#userNotLoggedIn").remove()，还是其他？目标是如果站点访问者未以用户身份登录，则不允许他们访问该页面。

最佳答案

就像是

$('#userNotLoggedIn').css('display', 'none');

也许？

但是，如果您希望能够应用并撤消它，我建议将display: none放在它自己的类中，可以随意放置和删除它。

就像是

.myHideClass {
   display: none;
}

$(`#userNotLoggedIn`).addClass('myhideClass');
$(`#userNotLoggedIn`).removeClass('myhideClass');

现在，当您执行任何逻辑时，都必须查看它们是否已登录，而在登录时什么也不做。如果未登录，请添加myHideClass，一旦登录，请删除myHideClass

编辑：

但是，有一个问题是，我很确定display: none;仍会在调试器之类的元素中使元素在DOM中可见。

Angular有一个ng-if属性，您可以放置标签并绑定到布尔值。类似于ng-if="userIsLoggedIn"，其中userIsLoggedIn是控制器中的布尔值，设置为true或false。

在dom中，当userIsLoggedIn为true时，元素及其中的所有内容都在dom中，但是；如果userIsLoggedIn === false，则在dom（如果检查）中，则div不可见。

您将在dom中看到的是，并且布尔值翻转为true时，注释的html行将变成您的所有实际html。