Class 通过 jquery 更改的按钮在单击同一 class 中的另一个按钮时改回原样

Question

我想在单击时将白色 ('btn-secondary') 分页上的按钮颜色从 bootstrap 更改为黄色 ('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');
    }
});

提前致谢！ :-)

这是它的外观动图： Simulation.gif

我要第一个保持黄色！

Answer 1

正如有人评论的那样，使用 $(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');    
});

Answer 2

当您将 .showAufgabe 设置为变量时，您实际上是在选择共享相同 class 名称的所有元素 - 在本例中为所有按钮。

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>

旁注： 这可能取决于您的具体要求，但您不必删除之前的 class，因为 .btn-warning 在 bootstrap 样式 sheet 中比 .btn-secondary 显示得更靠下，将其应用于按钮 class 将覆盖之前通过 .btn-secondary 应用的样式。

Class 通过 jquery 更改的按钮在单击同一 class 中的另一个按钮时改回原样

Class change of button via jquery is changed back, when clicking another button from same class

jquery

onclick

background-color

twitter-bootstrap