How to change the class applied to a span in several elements?

Question

I am developing an application and I have several span. example:

<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>

I want to do the following through jQuery.

1) I want to change the class of one span when clicking without affecting the other span, so that something like this remains:

<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) I have the following code that implements but that implies repeating the code several times with different id, and I do not want that, I want to create a general function that does that.

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

Can you help me. Thanks

Answer 1

You may get the parent item of clickables and then set accordingly. You can check

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> 

In this code, event handled for anchor tag as in your HTML code, you do not have a unique id, or you can write the click event in the HTML itself.

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

Hope it will help you.