【问题标题】：Adding and removing CSS classes with jquery使用 jquery 添加和删除 CSS 类
【发布时间】：2017-02-15 20:51:43
【问题描述】：

我正在尝试使用 jquery 调整页脚的大小。到目前为止，当我调整窗口大小时，它并没有添加类。我执行对了吗？

 /* 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>

编辑：在问题中嵌入代码而不是提供链接

【问题讨论】：

这可能与stackoverflow.com/questions/9828831/jquery-on-window-resize 重复（即使不是，该答案也可能会有所帮助）。此外，您可能想确定问题出在哪里。在你的调整大小处理程序中抛出一个console.log('foo')；如果您在调整大小时没有看到 foo 被记录，那么您就知道处理程序是问题所在。如果您确实看到它，您就知道问题出在处理程序内部的逻辑上。
除了@machineghost 注释，在 Stackoverflow 中，您还必须提供您尝试过的代码。
@sємsєм 公平地说，他做到了，只是很难识别（“在此处输入链接描述”链接到 pastebin）。只是为了表明在发布之前完整地写一个问题是多么重要，而不是在发布之后匆忙尝试解决它（我有时也会犯这个错误）。

标签： javascript jquery html css

【解决方案1】：

li 和 i 标签有许多相同的 id 参数，这会阻止 jquery 选择相同 id 的所有元素，所以让它们像下面这样类

<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>

然后使用修改后的javascript代码

$(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
});

【讨论】：

如果我实现这个 javascript（我 console.logged 它）但是 CSS 似乎没有变化，或者至少看起来没有变化。

【解决方案2】：

当需要删除一个类以使另一个类工作时，您没有包含案例。切换类应该修复它。

编辑：在这种情况下切换将不起作用。您必须使用其他解决方案：

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

【讨论】：

【解决方案3】：

jQuery addClass() 方法

jQuery addClass() 方法将一个或多个类添加到所选元素。

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

jQuery removeClass() 方法

同样，您可以使用 jQuery removeClass() 方法从元素中删除类。 removeClass() 方法可以从选定的元素中一次删除单个类、多个类或所有类。

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

【讨论】：