Question

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

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

我希望第一个保持黄色！

Answer 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应用的先前样式。

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

当点击同一类中的另一个按钮时，通过jquery更改按钮的类更改回来

2 个答案: