javascript - 如何更改应用于几个元素中的跨度的类？

Question

我正在开发一个应用程序，我有几个跨度。示例:

<a id="boton"> <span #span class = "glyphicon glyphicon-asterisk"> </ span> item 1 </a>
<a id="boton"> <span #span class = "glyphicon glyphicon-asterisk"> </ span> item 2 </a>
<a id="boton"> <span #span class = "glyphicon glyphicon-asterisk"> </ span> item 3 </a>
<a id="boton"> <span #span class = "glyphicon glyphicon-asterisk"> </ span> item 4 </a>
<a id="boton"> <span #span class = "glyphicon glyphicon-asterisk"> </ span> item 5 </a>

我想通过 jQuery 执行以下操作。

1) 我想在不影响另一个跨度的情况下单击时更改一个跨度的类，以便保留如下内容:

<a id="boton"> <span #span class = "glyphicon glyphicon-minus"> </ span> item 1 </a>
<a id="boton"> <span #span class = "glyphicon glyphicon-asterisk"> </ span> item 2 </a>
<a id="boton"> <span #span class = "glyphicon glyphicon-asterisk"> </ span> item 3 </a>
<a id="boton"> <span #span class = "glyphicon glyphicon-asterisk"> </ span> item 4 </a>
<a id="boton"> <span #span class = "glyphicon glyphicon-asterisk"> </ span> item 5 </a>

2) 我有以下实现的代码，但这意味着用不同的 id 重复代码几次，我不想那样，我想创建一个通用函数来执行此操作。

$ ('# button'). click (function () {
 $ ('# span'). toggleClass ('glyphicon-minus');
});

你能帮帮我吗？ 谢谢

Answer 1

您可以获取clickables的父项，然后进行相应的设置。你可以检查

Sample Code Here .

$ ('a'). click (function (event) {

var target = $( event.target );
  if ( target.is( "span" ) ) {
    target.toggleClass('glyphicon-minus');
  }
})

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a id="button" herf="#"> <span #span class = "glyphicon glyphicon-asterisk"> </ span> item 1 </a>
<br />
<a id="button"> <span #span class = "glyphicon glyphicon-asterisk"> </ span> item 2 </a>
<br />
<a id="button"> <span #span class = "glyphicon glyphicon-asterisk"> </ span> item 3 </a>
<br />
<a id="button"> <span #span class = "glyphicon glyphicon-asterisk"> </ span> item 4 </a>
<br />
<a id="button"> <span #span class = "glyphicon glyphicon-asterisk"> </ span> item 5 </a>

在这段代码中，像在 HTML 代码中一样为 anchor 标记处理事件，您没有唯一的 ID，或者您可以在 HTML 本身中编写点击事件。

$ ('a'). click (function (event) {
     var target = $( event.target );
     if ( target.is( "span" ) ) {
         target.toggleClass('glyphicon-minus');
     }
})

希望对你有所帮助。