Question

我有以下HTML

<li class="navUser-item navUser-item--account">
     <a class="navUser-action" href="/login.php">Login</a> 
     <span class="navUser-or">or</span> // Hide this
     <a class="navUser-action" href="/login.php?action=create_account">Sign Up</a>  // Hide this
</li>

我正在尝试使用Javascript隐藏最后一个ahref和span标记。我似乎无法按预期工作，我尝试了以下内容：

我希望我能扩展它以寻找一个给定的Href，如果它具有这样的价值，即创建帐户然后隐藏它，但没有这样的运气。

var litag = document.getElementsByClassName('navUser-item navUser-item--account'), i;

for (i = 0; i < litag.length; i += 1) {

   litag[i].style.display = 'none';
}

然后我尝试了以下内容：

document.getElementsByClassName('navUser-item navUser-item--account a:nth-last-child(2)')[0].style.visibility = 'hidden';

尝试找到第二个a然后却没有用，有人可以解释我如何隐藏跨度和最后一个href？

Answer 1

您可以像这样使用querySelector

var link = document.querySelector('a[href="/login.php?action=create_account"]');

link.style.display = 'none';

https://jsfiddle.net/mtinra/nsznwbgk/

修改：或使用querySelectorAll同时选择范围和

var myEl = document.querySelectorAll('.navUser-item > span, a[href="/login.php?action=create_account"]');

for (var el of myEl){
    el.style.display = 'none';
}

Answer 2

假设您只有一个导航菜单（我在这里navUser-item选择了类名为var childnodes = mainNav[0].childNodes;的第一个元素），您可以这样做：

＆＃13;

var mainNav = document.getElementsByClassName('navUser-item');
var childnodes = mainNav[0].childNodes;

for (i = 0; i < childnodes.length; i += 1) {
  if (childnodes[i].className && childnodes[i].className.match('navUser-action')) {
    if (childnodes[i].href && childnodes[i].href.indexOf('create_account') !== -1) {
      childnodes[i].style.display = 'none';
    }
  } else if (childnodes[i].className && childnodes[i].className.match('navUser-or')) {
    childnodes[i].style.display = 'none';
  }
}

＆＃13;

<li class="navUser-item navUser-item--account">
  <a class="navUser-action" href="/login.php">Login</a>
  <span class="navUser-or">or</span>
  <a class="navUser-action" href="/login.php?action=create_account">Sign Up</a>
</li>

＆＃13;

Answer 3

我通常发现更改类并使用CSS切换项目显示会更好。

var links = document.getElementById('link-list').children;
for (var i = 0; i < links.length; i++) {
  if (links[i].className.match(/(?:^|\s)navUser-register(?!\S)/)) {
    console.log(links[i]);
    links[i].className = links[i].className.match(/show/) ?
      links[i].className.replace(/show/, 'hide') :
      links[i].className.replace(/hide/, 'show');
  }
}

.hide {
  display: none;
}
.show {
  display: inline-block;
}

<li id="link-list" class="navUser-item navUser-item--account">
  <a class="navUser-action" href="/login.php">Login</a> 
  <span class="navUser-or navUser-register show">or</span>
  <a class="navUser-action navUser-register show" href="/login.php?action=create_account">Sign Up</a>
</li>

编辑：您还可以在div标签中包围所需的元素，并根据当前页面设置其显示属性。在我看来，这将是最简单的方法。 <div id="register-page" class="show"> ... elements ... </div> 而你的JavaScript部分只包括通过此ID搜索元素并将其从show切换为hide。 var div = document.getElementById('register-page') div.className.match(/show/) ? div.className.replace(/show/, 'hide') : div.replace(/hide/, 'show');

使用Javascript隐藏Href链接

3 个答案: