最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin3浏览0评论

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

Share Improve this question edited Oct 7, 2016 at 3:15 Jishnu V S 8,4177 gold badges28 silver badges58 bronze badges asked Oct 6, 2016 at 23:54 QuesofatQuesofat 1,5313 gold badges25 silver badges52 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

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

发布评论

评论列表(0)

  1. 暂无评论