javascript - Adding and removing CSS classes with jquery - Stack Overflow

admin管理员组

文章数量:1322692

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="/"><i id="ico" class="fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li>
      <li><a id="anc" class="nostyle" href="/"><i id="ico" class="fa fa-github fa-2x" aria-hidden="true"></i></a></li>
      <li><a id="anc" class="nostyle" href="/"><i id="ico" class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
      <li><a id="anc" class="nostyle" href="/"><i id="ico" class="fa fa-twitter fa-2x" aria-hidden="true"></i></a></li>
      <p>Lorem Ipsum</p>
    </ul>
  </div>
</div>

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./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./"><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./_/"><i id="ico" class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
      <li><a id="anc" class="nostyle" href="https://twitter./"><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

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Oct 7, 2016 at 3:15 Jishnu V S 8,41777 gold badges2828 silver badges5858 bronze badges asked Oct 6, 2016 at 23:54 QuesofatQuesofat 1,53133 gold badges2525 silver badges5252 bronze badges 3

• 4 This might be a duplicate of stackoverflow./questions/9828831/jquery-on-window-resize (and even if not, that answer might be helpful). Also, you might want to identify where the problem is. Throw a console.log('foo') inside your resize handler; if you don't see foo get logged when you resize you know that the handler is the problem. If you do see it, you know the problem is with the logic inside the handler. – machineghost Commented Oct 6, 2016 at 23:58
• 1 In addition to @machineghost ment, in Stackoverflow, you have to supply the code that you have tried. – SaidbakR Commented Oct 7, 2016 at 0:01
• 1 @sємsєм To be fair, he did, it's just hard to recognize ("enter link description here" links to a pastebin). Just goes to show how important it is to write a question fully before posting, rather than rushing and trying to fix it after (a mistake I too am sometimes guilty of making). – machineghost Commented Oct 7, 2016 at 0:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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./in/"><i class="ico fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li>
                    <li><a class="anc nostyle" href="https://github./"><i class="ico fa fa-github fa-2x" aria-hidden="true"></i></a></li>
                    <li><a class="anc nostyle" href="https://www.instagram./_/"><i class="ico fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
                    <li><a class="anc nostyle" href="https://twitter./"><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
});

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");
    }
  });
});

本文标签： javascriptAdding and removing CSS classes with jqueryStack Overflow