使用jQuery添加和删除CSS类

Question

我正在尝试使用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>

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

- Quesofat

---

这可能是https://dev59.com/1Gkw5IYBdhLWcg3wiq-s的重复内容（即使不是，那个答案也可能有帮助）。此外，您可能想要确定问题出在哪里。在调整大小处理程序内部添加 console.log('foo')；如果您没有看到调整大小时记录'foo'，则说明处理程序有问题。如果您看到了它，则说明问题出在处理程序内部的逻辑上。 - machineghost

除了@machineghost的评论之外，在Stackoverflow上，您必须提供您尝试过的代码。 - SaidbakR

@sємsєм 公平地说，他确实提供了链接（“enter link description here”链接到pastebin），只是很难识别。这表明在发布问题之前，写好完整的问题非常重要，而不是匆忙发布并试图在之后修复它（这也是我有时会犯的错误）。 - machineghost

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

- user6918113

---

如果我在JavaScript中实现它（我使用console.log进行了记录），但是CSS似乎没有任何变化，或者至少外观上没有变化。 - Quesofat

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

- kind user