使用 jquery 添加和删除 CSS 类

Question

I am trying to resize my footer with jquery. So far when I resize the window it doesn't add the class. Am I implementing it right?

 /* My jQuery: */ $(document).ready(function() { $(window).on('resize', function(){ var win = $(this); if (win.width() > 600) { $("#anc").addClass('social-lg'); $("#ico").addClass("icon-lg"); } else { $("#anc").addClass('social-sm'); $("#ico").addClass("icon-sm"); } }); });

 /* My CSS: */ .social-lg div.col-md-12 > ul > li > a { border: 2px solid #616161; border-radius: 50%; display: inline-block; letter-spacing: normal; text-align: center; height: 4.25rem; width: 4.25rem; } .icon-lg div.col-md-12 > ul > li > a > i { padding-top: .5rem; font-size: 2em; } .social-sm div.col-md-12 > ul > li > a { border: 2px solid #616161; border-radius: 50%; display: inline-block; letter-spacing: normal; text-align: center; height: 3.25rem; width: 3.25rem; } .icon-sm div.col-md-12 > ul > li > a > i { padding-top: .5rem; font-size: 1.5em; }

 <!-- My HTML: --> <div class="row" id="footer"> <div class="col-md-12"> <ul> <li><a id="anc" class="nostyle" href="https://www.linkedin.com/in/"><i id="ico" class="fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li> <li><a id="anc" class="nostyle" href="https://github.com/"><i id="ico" class="fa fa-github fa-2x" aria-hidden="true"></i></a></li> <li><a id="anc" class="nostyle" href="https://www.instagram.com/_/"><i id="ico" class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li> <li><a id="anc" class="nostyle" href="https://twitter.com/"><i id="ico" class="fa fa-twitter fa-2x" aria-hidden="true"></i></a></li> <p>Lorem Ipsum</p> </ul> </div> </div>

Edit: embedded code inside the question instead of providing a link

Answer 1

You have a number of same id parameters for li and i tags which prevents jquery to select all the elements of the same id, so make them classes like following

<div class="row" id="footer">
            <div class="col-md-12">
                <ul>
                    <li><a class="anc nostyle" href="https://www.linkedin.com/in/"><i class="ico fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li>
                    <li><a class="anc nostyle" href="https://github.com/"><i class="ico fa fa-github fa-2x" aria-hidden="true"></i></a></li>
                    <li><a class="anc nostyle" href="https://www.instagram.com/_/"><i class="ico fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
                    <li><a class="anc nostyle" href="https://twitter.com/"><i class="ico fa fa-twitter fa-2x" aria-hidden="true"></i></a></li>
                    <p>Lorem Ipsum</p>
                </ul>
            </div>
        </div>

Then use the modified javascript code

$(document).ready(function() {
  $(window).on('resize', function() {
    var win = $(this);
    if (win.width() > 600) {
      $(".anc").addClass('social-lg').removeClass('social-sm');
      $(".ico").addClass("icon-lg").removeClass("icon-sm");
    } else {
      $(".anc").addClass('social-sm').removeClass('social-lg');
      $(".ico").addClass("icon-sm").removeClass("icon-lg");
    }
  }).trigger("resize"); //this to force first event on load
});

Answer 2

You didn't include a case when there's a need to delete a one class to make another one work. Toggle class should fix it.

Edit: toggle won't work in this case. You have to use another solution:

 $(document).ready(function() { $(window).on('resize', function() { var win = $(this); if (win.width() > 600) { $("#anc").addClass('social-lg'); $("#ico").addClass("icon-lg"); $("#anc").removeClass('social-sm'); $("#ico").removeClass("icon-sm"); } else { $("#anc").addClass('social-sm'); $("#ico").addClass("icon-sm"); $("#anc").removeClass('social-lg'); $("#ico").removeClass("icon-lg"); } }); }); 

Answer 3

jQuery addClass() Method

The jQuery addClass() method adds one or more classes to the selected elements.

$("h1").addClass("page-header");//add your class name here

jQuery removeClass() Method

Similarly, you can remove the classes from the elements using the jQuery removeClass() method. The removeClass() method can remove a single class, multiple classes, or all classes at once from the selected elements.

$("h1").removeClass("page-header");

More Informations: https://slaford.com/css/jquery-add-and-remove-css-classes/