Question

我很难在DOM中选择锚链接，它是我的列表项“dropdown-nav”的直接子项。它应该在单击列表项时更改链接但不会。活动类完美应用我在这里做错了什么？

var acc = document.getElementsByClassName("dropdown-nav");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active-hit");
    this.find("a").attr("href", "http://www.google.com/");
  });
}

<ul>
  <li class="dropdown-nav">
    <a href="/about">About
      <span class="nav-desc">Our company</span>
    </a>
    <div class="hide-border"></div>
    <ul class="second-tier">
      <div class="hide-corner"></div>
      <li><a href="#">Our Mission</a></li>
      <li><a href="#">Our People</a></li>
      <li><a href="#">Work with us</a></li>
      <li><a href="#">High Value Manufacturing</a></li>
    </ul>
  </li>
</ul>

Answer 1

你包含了jQuery，所以你可以更新你的代码，只需使用这样的jQuery：

$(".dropdown-nav").click(function() {
  $(this).toggleClass('active-hit');
  $(this).find('a').attr("href", "http://www.google.com/");
})

.active-hit {
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="dropdown-nav">
    <a href="/about">About
      <span class="nav-desc">Our company</span>
    </a>
    <div class="hide-border"></div>
    <ul class="second-tier">
      <div class="hide-corner"></div>
      <li><a href="#">Our Mission</a></li>
      <li><a href="#">Our People</a></li>
      <li><a href="#">Work with us</a></li>
      <li><a href="#">High Value Manufacturing</a></li>
    </ul>
  </li>
</ul>

Answer 2

this不是jQuery对象。替换此行：

this.find("a").attr("href", "http://www.google.com/");

有了这个（这将改变第一个链接的href，如果你需要更改所有这些，那么迭代）：

this.getElementsByTagName('a')[0].setAttribute('href', 'http://www.google.com/');

如果你已经包含了jQuery，你也可以这样做：

$(this).find("a").attr("href", "http://www.google.com/");

选择列表项的锚子项

2 个答案: