当单击同一类中的另一个按钮时，通过 jquery 的按钮类更改被改回答案

【问题标题】：Class change of button via jquery is changed back, when clicking another button from same class当单击同一类中的另一个按钮时，通过 jquery 的按钮类更改被改回
【发布时间】：2017-11-27 05:26:59
【问题描述】：

我想在单击时将白色（'btn-secondary'）分页上的按钮颜色从引导程序更改为黄色（'btn-warning'）。这适用于我下面的代码，但是如果我单击同一分页上的下一个按钮，则先前单击的按钮会变为以前的颜色。

HTML：

<button class="showAufgabe btn btn-secondary btn-sm">01</button>
<button class="showAufgabe btn btn-secondary btn-sm">02</button>
...
<button class="showAufgabe btn btn-secondary btn-sm">39</button>
<button class="showAufgabe btn btn-secondary btn-sm">40</button>

jQuery：

$(document).ready(function() {
    var showAufgabe = $('.showAufgabe');
    $(document).on('click', showAufgabe, clickedAufgabe);

    function clickedAufgabe() {
        $(this).addClass('btn-warning').removeClass('btn-secondary');
    }
});

提前感谢您！ :-)

这是它外观的 GIF： Simulation.gif

我希望第一个保持黄色！

【问题讨论】：

$('.showAufgabe') 代表所有具有此类的 btn - 所以只需使用 $(this) 将更改仅应用于单击的 btn
我不太确定我明白你的意思......
我编辑了我的帖子！

标签： jquery twitter-bootstrap onclick background-color

【解决方案1】：

当您将.showAufgabe 设置为一个变量时，您实际上是在选择所有具有相同类名的元素——在本例中为所有按钮。

var showAufgabe = $('.showAufgabe');

当您在函数中单击按钮时，您可以调用$(this)。然后它将仅在该特定按钮上切换.btn-warning。

$(".showAufgabe").on('click', function() {
  $(this).toggleClass('btn-warning');
});

.btn-warning {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="showAufgabe btn btn-secondary btn-sm">01</button>
<button class="showAufgabe btn btn-secondary btn-sm">02</button>
...
<button class="showAufgabe btn btn-secondary btn-sm">39</button>
<button class="showAufgabe btn btn-secondary btn-sm">40</button>

旁注：这可能取决于您的具体要求，但您不必删除之前的课程，因为.btn-warning 出现在引导程序的更下方样式表而不是.btn-secondary，将其应用于按钮类将覆盖以前通过.btn-secondary 应用的样式。

【讨论】：

@themd91 这是否达到了您的预期？
是的，严格意义上来说是这样！但是我的分页脚本代码会干扰它，我不知道。我会在几分钟后编辑我的帖子..
对不起，我有问题！我有一个 php-for-loop，它创建了 40 个练习，包括 for 循环的每个步骤的所有按钮。因此，每次我单击一个按钮时，都会显示另一组我的 pagination-html，因此它不起作用！所以你的代码达到了我的预期，非常感谢@Liondedan
@themd91 太棒了！祝构建的其余部分好运

【解决方案2】：

正如有人评论的那样，使用$(this) 仅定位已单击的按钮。

像这样：

$('.showAufegabe.btn-secondary').click( function () {
    $(this).addClass('btn-warning').removeClass('btn-secondary');    
});


$('.showAufegabe.btn-warning').click( function () {
    $(this).addClass('btn-secondary').removeClass('btn-warning');    
});

【讨论】：