我怎样才能提高使用 Javascript 定位我的 html 元素的效率

Question

我有一个带有链接的菜单，当我单击每个链接时，我让它们将小时的不透明度切换为 1，当然，使菜单上的所有其他链接（小时）恢复到他们之前的原始不透明度 0（经典菜单 UX ).问题是要实现这一点，我必须使用 2 个嵌套的 for 循环使用 JS。从我对 Big O 表示法的了解来看，这不是很有效，尤其是使用 jquery 时，所有这些代码都在一行中完成。我的问题是如何仅使用 Vanilla JS 提高此代码的效率？HTML<div className="menu">    <h6>Home<hr/></h6>    <h6>Movies<hr/></h6>    <h6>TV Shows<hr/></h6>    <h6>Documentaries<hr/></h6>    <h6>Favorites<hr/></h6>    <h6>Collection<hr/></h6></div>JSconst menulink = document.querySelectorAll('.menu h6')for(let item of menulink) {  item.onclick = () => {    for(let i=0;i<menulink.length;i++) {      menulink[i].querySelector('hr').style.opacity = '0'         }    item.querySelector('hr').style.opacity = '1'  } } 

Answer 1

我认为你可以实现这个保存当前项目：

const menulink = document.querySelectorAll('.menu h6');

let current = null;

for(let item of menulink) {

  item.onclick = () => {

    if (current) current.style.opacity = '0'

    current = item.querySelector('hr')

    current.style.opacity = '1'

  } 

}

hr {

  opacity: 0;

}

<div class="menu">

    <h6>Home<hr/></h6>

    <h6>Movies<hr/></h6>

    <h6>TV Shows<hr/></h6>

    <h6>Documentaries<hr/></h6>

    <h6>Favorites<hr/></h6>

    <h6>Collection<hr/></h6>

</div>

Answer 2

看哪！

const menulink = document.querySelectorAll('.menu h6')

let activeHr;

for(let item of menulink) {

  item.onclick = (event) => {

    if (activeHr) {

        activeHr.style.opacity = '0';

    }

    

    activeHr = event.currentTarget.querySelector('hr');

    activeHr.style.opacity = '1';

  } 

} 

hr {

opacity: 0;

}

<div class="menu">

    <h6>Home<hr/></h6>

    <h6>Movies<hr/></h6>

    <h6>TV Shows<hr/></h6>

    <h6>Documentaries<hr/></h6>

    <h6>Favorites<hr/></h6>

    <h6>Collection<hr/></h6>

</div>

Answer 3

以上所有答案都试图使您的代码正常工作-而不是考虑最好的 html 和 CSS-不需要使用 hr-您只需要在元素上设置活动类并让 CSS 应用边框底部给它。

这样标题就不会在点击时跳转——我在每个 h6 下添加了一个透明边框，然后当你点击它时应用活动类，样式只是为底部边框着色。

您不应出于样式目的使用 html 元素 (hr/) - IMO。

我也不同意在这里使用 h6——这些 o 似乎不是标题……但我把它留了下来，以防代码比你显示的更多——例如，如果它们是页面下方的标题——但是常规导航列表在这里似乎更合适。

感谢@Barmar 提供了我使用的代码框架，我同意他使用活动类的方法。请注意，我正在使用空检查来删除现有的活动类 - 尽管可以通过简单地将第一个标题从一开始就设置为活动来缓解这种情况。

const menuLinks = document.querySelectorAll('.menu h6')

for (let menuLink of menuLinks) {

  menuLink.onclick = () => {

    document.querySelector('.menu h6.active')?.classList.remove('active');

    menuLink.classList.add('active');

  }

}

.menu h6 {

  padding-bottom: 2px;

  border-bottom: solid 1px transparent;

  transition: all 0.2s ease-in-out

}

.menu h6.active {

  border-bottom-color: #000

}

.menu h6:hover {

  border-bottom-color: #000;

  transition: all 0.25s ease-in-out

}

<div class="menu">

  <h6>Home</h6>

  <h6>Movies</h6>

  <h6>TV Shows</h6>

  <h6>Documentaries</h6>

  <h6>Favorites</h6>

  <h6>Collection</h6>

</div>

Answer 4

您可以在设置标题标签样式时使用悬停选项。在悬停中，您可以添加您选择的颜色，这样每当您将鼠标悬停在它上面时，颜色就会改变

Answer 5

不要直接设置样式，通过 CSS 类的样式来设置。然后你可以找到当前有类的元素并删除它，同时将类添加到新选择的元素。

const menulink = document.querySelectorAll('.menu h6')

for (let item of menulink) {

  item.onclick = () => {

    let old = document.querySelector('.menu h6 hr.active');

    if (old) {

      old.classList.remove("active");

    }

    item.querySelector('hr').classList.add("active");

  }

}

.menu h6 hr.active {

  opacity: 1;

}

.menu h6 hr {

  opacity: 0;

}

<div class="menu">

  <h6>Home

    <hr/>

  </h6>

  <h6>Movies

    <hr/>

  </h6>

  <h6>TV Shows

    <hr/>

  </h6>

  <h6>Documentaries

    <hr/>

  </h6>

  <h6>Favorites

    <hr/>

  </h6>

  <h6>Collection

    <hr/>

  </h6>

</div>