Problem with a Javascript function

Asked

Viewed 70 times

2

I have a problem here and I don’t know how to solve, in theory, in my role below 768px was to add the class .navbar-inverse the tag nav, and above 768px is to remove it if it exists, but nothing happens.

Edit: I did some tests and I saw that he is ALWAYS removing this class and so it is giving problem.

My JS is like this:

 $(document).ready(function () {
    $(window).resize(function () {
  var $element = $("nav");
    /*Abaixo de 768px, add a classe .navbar-inverse*/
  if (window.innerWidth < 768) {
      if(!$element.hasClass(".navbar-inverse")) {
          $element.addClass(".navbar-inverse")
        }
  }
    /* Acima de 768px, se existir a classe navbar-inverse ela é retirada*/

  if (window.innerWidth > 768) {
      if($element.hasClass(".navbar-inverse")) {
          $element.removeClass(".navbar-inverse")
      }
  } 
});
});

I can’t see the problem, the tag nav there is, but nothing happens.

jquery addclass hasclass

  • If you resize the screen works?

  • Nope, n matter the resolution I resize the screen it n works.

  • 2

    While current responses solve your immediate problem, you’ve considered using media queries instead of adding/removing classes via Javascript? (sometimes you can’t avoid JS, but if it’s just a matter of styling the components based on screen resolution, a pure CSS solution is preferable)

  • 1

    Already, I use, but the layout was bugging below 768px. I’m using the bootstrap to make the layout and to make it look good below 768px I had to add this class to adapt the layout for mobile users.

2 answers

7


The problem is that hasClass, addClass and removeClass expect the class name, not a selector. Therefore, it is not to put the point at the beginning. Other than that, the ifThe ones that check if the element already has the class are unnecessary, and can optimize the performance avoiding looking for the element at all times. I would do so:

$(document).ready(function () {
    var $element = $("nav");
    $(window).resize(function () {    
        /*Abaixo de 768px, add a classe .navbar-inverse*/
        if (window.innerWidth < 768) {
            $element.addClass("navbar-inverse");
        /* Acima de 768px, se existir a classe navbar-inverse ela é retirada*/
        } else {
            $element.removeClass("navbar-inverse");
        }
    });
});

  • Thank you! But now I was thinking here with my buttons, if a person enters the site by mobile he n will do the resize, he will enter with a fixed resolution, I tried to call the logic in a function like this: Function trocaEstilo(){ but did not happen, you would have some hint?

  • I think the best solution was to use media queries as @mgibsonbr suggested upstairs...

  • I’ve tried tidying by Media Queries, but Buga a lot and I can’t add the button. So I wanted so because below 768px I would move to another bootstrap style to call the menu button in a way that it appears.

  • @Andreyhartung Maybe it’s worth posting a separate question about why your media wanted to.

4

Removes the . jQuery selector in functions hasClass, addClass and removeClass.

Try:

$(document).ready(function () {

    $(window).resize(function () {

        var $element = $("nav");

        /*Abaixo de 768px, add a classe .navbar-inverse*/
        if (window.innerWidth < 768) {
            if (!$element.hasClass("navbar-inverse")) {
                $element.addClass("navbar-inverse")
            }
        }

        /* Acima de 768px, se existir a classe navbar-inverse ela é retirada*/
        if (window.innerWidth > 768) {
            if ($element.hasClass("navbar-inverse")) {
                $element.removeClass("navbar-inverse")
            }
        }
    });
});

Browser other questions tagged jquery addclass hasclass

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