Question

在页面上，我有多个按钮但具有相同的类，并且我想在每次按钮单击时添加类loading。

$(".btn").click(function() {
    $(".btn").addClass('loading');
    alert("button 1 clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div>
  <a href="#" cass="btn btn-test">Button 1</a>
  <a href="#" class="btn btn-test">Button 2</a>
  <a href="#" class="btn btn-test2">Button 3</a>
  <a href="#" class="btn btn-test2">Button 1</a>
</div>

如何处理不同的单击按钮，以便每次单击按钮时都会出现相同的警报？

Answer 1

您可以使用this运算符。在下面的示例中，this表示正在处理的当前对象。

请参见Mozilla Docs

<div>
  <a href="#" cass="btn btn-test">Button 1</a>
  <a href="#" class="btn btn-test">Button 2</a>
  <a href="#" class="btn btn-test2">Button 3</a>
  <a href="#" class="btn btn-test2">Button 1</a>
</div>

$(".btn").click(function() {
    $(this).addClass('loading');
    alert("button 1 clicked");
});

Answer 2

您要使用this关键字来引用其对象（在这种情况下元素被单击）

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

$(".btn").click(function() {
    this.classList.add('loading')
});

.loading {background: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div>
  <a href="#" class="btn btn-test">Button 1</a>
  <a href="#" class="btn btn-test">Button 2</a>
  <a href="#" class="btn btn-test2">Button 3</a>
  <a href="#" class="btn btn-test2">Button 1</a>
</div>

Answer 3

使用此键盘密码this

$(".btn").click(function() {
    $(this).addClass('loading');
});

Answer 4

$(".btn").on('click', function() {
    $(this).addClass('loading');
    alert("button clicked");
});

给他们同一个班级，它应该可以工作。

进行动态点击

4 个答案: