How do you take the elements

Asked

Viewed 53 times

0

const headerNavLink = document.querySelectorAll('.header-nav-link')
const headerNavItemTitle = document.querySelectorAll('.header-nav-item__title')

headerNavItemTitle.forEach(function(e, indice) {
  e.addEventListener('click', function(e) {
    console.log(headerNavLink[indice])
  })
})
<nav class="header-nav">
  <ul class="header-nav-items header-nav-items--mobile">
    <li class="header-nav-item"><span class="header-nav-item__title">CBA</span>
    </li>
    <li class="header-nav-item"><span class="header-nav-item__title">Aluminio</span></li>
    <li class="header-nav-item"><span class="header-nav-item__title"><a href="#"
                    class="header-nav-item__link">Produtos</a></span></li>
    <li class="header-nav-item"><span class="header-nav-item__title"><a href="#"
                    class="header-nav-item__link">Carreiras</a></span></li>
    <li class="header-nav-item"><span class="header-nav-item__title">Contato</span></li>
    <li class="header-nav-item"><span class="header-nav-item__title">EN</span></li>
  </ul>

  <nav class="header-nav-content">
    <div class="header-nav-link" data-number="1">
      Data 1
    </div>
    <div class="header-nav-link" data-number="2">
      Data 2
    </div>
    <div class="header-nav-link" data-number="3">
      Data 3
    </div>
  </nav>
</nav>

How can I click on header-Nav-item__title (CBA), header-Nav-item__title (Aluminio), header-Nav-item__title (contact) to access data-number?

javascript css html5

  • What is the relationship between .header-nav-item__title and .header-nav-link? which the data-number which corresponds to each?

  • In a linear way when clicking on CBA the Data 1 appears, when clicking on Aluminum the Data 2 appears, and when clicking on Contact the Data3 appears

  • So you want to ignore the ones with a link like Produtos and Carreiras?

  • Yes I want to ignore the links 'Products and Careers'.

  • Okay, I edited the answer, added a filter to remove the li who have a within.

  • You solved my problem. Thanks Sergio.

Show 1 more comment

1 answer

2


To access the attribute data- you can use the .dataset. An example would be:

headerNavLink[indice].dataset.number

With your code it would be:

const headerNavLink = document.querySelectorAll('.header-nav-link')
const headerNavItemTitle = [...document.querySelectorAll('.header-nav-item__title')]

headerNavItemTitle
  .filter(el => !el.querySelector('a'))
  .forEach(function(e, indice) {
    e.addEventListener('click', function(e) {
      console.log(headerNavLink[indice].dataset.number)
    })
  })
<nav class="header-nav">
  <ul class="header-nav-items header-nav-items--mobile">
    <li class="header-nav-item"><span class="header-nav-item__title">CBA</span>
    </li>
    <li class="header-nav-item"><span class="header-nav-item__title">Aluminio</span></li>
    <li class="header-nav-item"><span class="header-nav-item__title"><a href="#"
                class="header-nav-item__link">Produtos</a></span></li>
    <li class="header-nav-item"><span class="header-nav-item__title"><a href="#"
                class="header-nav-item__link">Carreiras</a></span></li>
    <li class="header-nav-item"><span class="header-nav-item__title">Contato</span></li>
    <li class="header-nav-item"><span class="header-nav-item__title">EN</span></li>
  </ul>

  <nav class="header-nav-content">
    <div class="header-nav-link" data-number="1">
      Data 1
    </div>
    <div class="header-nav-link" data-number="2">
      Data 2
    </div>
    <div class="header-nav-link" data-number="3">
      Data 3
    </div>
    <div class="header-nav-link" data-number="4">
      Data 4
    </div>
  </nav>
</nav>

  • I’m sorry... the question was wrong.. I’ve changed, if you can help me I appreciate the hug!

Browser other questions tagged javascript css html5

You are not signed in. Login or sign up in order to post.