javascript - 如何在 CSS 或 jQuery 中持续更改按钮的颜色

Question

我有一些按钮，按下后我想变成蓝色

$(document).ready(function() {
  $("button.btn.btn-default").on('click', function() {
    $(this).toggleClass('active');
  });
});

.active {
  background-color: #0F89BE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default" role="button" value="50">
            $50                              
</button>
<button class="btn btn-default" role="button" value="50">
            $100                              
</button>

我有多个按钮，我希望选定的按钮变为蓝色(激活)。类似于单选按钮。有没有更简单的方法来完成这个？ jQuery 对我不起作用，我不确定自己做错了什么。

Answer 1

.css 接受一个 CSS 属性名称 和一个值，例如

$(this).css('background-color', '#0F89BE')

它不接受您要添加的新类(class)。如果要向元素添加类，请使用 addClass:

$(document).ready(function() {
  $("button.btn.btn-default").on('click', function() {
    $(this).addClass('active');
  });
});

.active {
  background-color: #0F89BE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default" role="button" value="50">
            $50                              
</button>

如果您希望能够再次单击按钮以删除类，请改用 toggleClass:

$(document).ready(function() {
  $("button.btn.btn-default").on('click', function() {
    $(this).toggleClass('active');
  });
});

.active {
  background-color: #0F89BE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default" role="button" value="50">
            $50                              
</button>

如果您一次只希望一个按钮具有.active，请在使用addClass 之前对所有按钮调用removeClass:

$(document).ready(function() {
  const btns = $("button.btn.btn-default");
  btns.on('click', function() {
    btns.removeClass('active');
    $(this).addClass('active');
  });
});

.active {
  background-color: #0F89BE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default" role="button" value="50">
            $50                              
</button>
<button class="btn btn-default" role="button" value="50">
            $60                              
</button>