javascript - 单击按钮时无法修改字形图标类

Question

我正在尝试使用 this 引用在每次单击按钮时将 glyphicon-plus 与 glyphicon-minus 切换。可以看看here .

$("#button-list button").each(function(index) {
  $(this).on("click", function() {
    $(this).toggleClass("btn-default btn-success");
    $(this + " span").toggleClass("glyphicon-plus glyphicon-minus");
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

<div id="button-list">
  <button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-plus"></span> 
    1
  </button>
  <button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-plus"></span> 
    2
  </button>
  <button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-plus"></span> 
    3
  </button>
</div>

Answer 1

问题是因为您试图将 this(对引发事件的 Element 对象的引用)连接到一个字符串。这不是一个有效的选择器。

相反，您需要在更改类之前使用 find() 方法检索 this 中的 span。

另请注意，您不需要 each() 循环。您可以将 click 事件处理程序应用于元素集合，jQuery 会自动为您处理。

$("#button-list button").on("click", function() {
  $(this)
    .toggleClass("btn-default btn-success")
    .find('span').toggleClass("glyphicon-plus glyphicon-minus");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<div id="button-list">
  <button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-plus"></span> 
    1
  </button>
  <button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-plus"></span> 
    2
  </button>
  <button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-plus"></span> 
    3
  </button>
</div>