如何使用jQuery实现按钮点击切换类以改变箭头方向？

我看到你想要实现点击按钮时切换箭头方向的功能，现在你的代码里有几个小细节需要调整，我来帮你修正并优化~

首先，你的jQuery代码存在错误 #

你在removeClass和addClass中给类名加了.前缀，这是不对的——jQuery操作类名时不需要加这个符号，直接写类名本身即可。另外，如果你想要实现点击按钮来回切换箭头状态（点一次箭头向下，再点一次箭头向右），用toggleClass会更高效，它能自动完成"添加/移除类"的切换逻辑。

其次，CSS代码可以优化 #

当前.button和.open-button重复了大量相同样式，非常冗余。我们可以把公共样式统一放在.button中，.open-button只需要覆盖背景图片这一项即可，让代码更简洁易维护。

修正后的完整代码 #

HTML（你的原始代码没问题，保留即可）

<div class="container"> 
  <div class="row"> 
    <div class="col-md-3"> 
      <div class="slide1 tab"> 
        <h2 class="button">Is a bonus work taking?</h2> 
      </div> 
    </div> 
    <div class="col-md-3"> 
      <div class="slide2 tab"> 
        <h2 class="button">How does it work?</h2> 
      </div> 
    </div> 
    <div class="col-md-3"> 
      <div class="slide3 tab"> 
        <h2 class="button">Chances of redeeming bonus </h2> 
      </div> 
    </div> 
    <div class="col-md-3"> 
      <div class="slide4 tab"> 
        <h2 class="button">Required documents</h2> 
      </div> 
    </div> 
  </div> 
</div>

优化后的CSS

.button { 
  background: url(https://preview.c9users.io/jafar70/harry/img/arrowhead-pointing-to-the-right.png) no-repeat right center #DC7228; 
  background-position: 98% 50%; 
  margin-right: 200px !important; 
  color: #FFFFFF; 
  display: block; 
  margin: 10px 0 0 !important; 
  padding: 1em 1em; 
  font-weight: 700; 
  font-size: 13px; 
  border-radius: 10px; 
} 
/* 仅覆盖需要修改的样式，其余继承.button的公共样式 */
.open-button { 
  background-image: url(https://preview.c9users.io/jafar70/harry/img/caret-down.png);
}

修正后的jQuery代码

// 点击按钮自动切换open-button类，实现箭头方向切换
$('.tab > .button').click(function() {
  $(this).toggleClass('open-button');
});

额外扩展：单选式切换（仅保留一个向下箭头） #

如果你想要实现"点击某个按钮时，其他按钮自动恢复向右箭头"的单选效果，可以用下面的jQuery代码：

$('.tab > .button').click(function() {
  // 先移除所有按钮的open-button类
  $('.tab > .button').removeClass('open-button');
  // 再给当前点击的按钮添加类
  $(this).addClass('open-button');
});

这样就能满足你想要的切换功能啦~

内容的提问来源于stack exchange，提问作者Jafar Salami