Loop is inside a function

Question

Loop is inside a function

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I have a nav with 5 buttons, and a footer with the same amount, when clicking the footer buttons they serve as anchor for the page, but I need to compare with the nav items to be added to the class "Activate them ".

Only returning me

btnnav[i].attr("href") is not a function

What to do?

 $('footer li a').click(function(){
      var hfooter = $(this).attr("href");// Guarda o href desse botao no footer
      var btnnav = $(".btn-nav");//cria um array com todos os botoes da nav
      btnnav.removeClass("active");//tira a classs active deles
      for (var i = 0; i <= btnnav.length; i++) {
         if (btnnav[i].attr("href") === hfooter){
           /*Ao percorrer o array de classes ele deve buscar o que tem o
            href igual o botao que foi clicado, quando encontrar, 
             vai adicionar a class active*/
            btnnav[i].addClass("active");
         }
      }
  });

javascript jquery

asked by anonymous 13.06.2017 / 19:24

3 answers

What kind of PDO :: FETCH_ * is the fastest? Modal ajax tracking mails

score 2 · Answer 1

I do not think you need to do the whole process ... From what you wrote, you just want to change the active classes, right? So just remove the current one and assign it to the new element (of the event):

$('.footer li a').click(function() {
  $(".footer").find(".btn-nav").removeClass("active"); //tira a classe active
  $(this).addClass("active"); //Adiciona a classe active ao elemento clicado.
});

EDIT:

I think I understand what you want ... see if the solution below caters to you.

$('.footer li a').click(function() {
  $(".btn-nav").removeClass("active"); //tira a classe active
  var elementos = $(".btn-nav");
  var elementoClicado = $(this);
  var textoLink = elementoClicado.text().trim();
  $.each(elementos, function() {
    if ($(this).text().trim() == textoLink) { // Compara se o elemento do "bottom" com o elemento do topo através do texto - adaptar se estiver outra forma de identificar unicamente.
      $(this).addClass("active"); //Adiciona a classe active ao elemento do topo
      //opcional:
      //elementoClicado.addClass("active"); //Adicionar classe active ao elemento clicado (bottom)
      return false;
    }
  });
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="header">
  <ul>
    <li><a href="#" class="btn-nav">Link 1</a></li>
    <li><a href="#" class="btn-nav">Link 2</a></li>
    <li><a href="#" class="btn-nav">Link 3</a></li>
    <li><a href="#" class="btn-nav">Link 4</a></li>
  </ul>
</div>
<hr /> Parte de baixo
<hr />
<div class="footer">
  <ul>
    <li><a href="#" class="btn-bottom">Link 1</a></li>
    <li><a href="#" class="btn-bottom">Link 2</a></li>
    <li><a href="#" class="btn-bottom">Link 3</a></li>
    <li><a href="#" class="btn-bottom">Link 4</a></li>
  </ul>
</div>

score 1 · Answer 2

In a clean way you can do:

$( document ).ready( () => {
    $( '#navLinks .btn-nav' ).click( function () {
      $( '#navLinks' )
        .find( '.btn-nav' )
        .removeClass( 'active' );
      
      $( this ).addClass( 'active' )
    })
})

.active{
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><nav><ulid="navLinks">
  
    <li> 
      <a class="btn-nav" href="#a">A</a> 
    </li>
    <li> 
      <a class="btn-nav" href="#b">B</a> 
    </li>
    <li> 
      <a class="btn-nav" href="#c">C</a> 
    </li>
     <li> 
      <a class="btn-nav" href="#d">D</a> 
    </li>
    <li> 
      <a class="btn-nav" href="#e">E</a> 
    </li>
    
  </ul>
</nav>

score 0 · Answer 3

With the code below you can get the value of href of each item to later make the desired comparisons.

jQuery(function($){
   $(document).ready(function(){
        var elements = $(".btn-nav");
	var link = "";
        for (var i = 0; i < elements.length; i++) {
           link = $(elements[i]).attr("href");
           console.log(link);
	}
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><navid="menu">
<a class="btn-nav" href="link1">HTML</a> |
<a class="btn-nav" href="link2">CSS</a> |
<a class="btn-nav" href="link3">JavaScript</a> |
<a class="btn-nav" href="link4">jQuery</a> |
<a class="btn-nav" href="link5">json</a>
</nav>