带有切换类的 jquery 更改图标

Question

CSS

.plus { background-image : sample plus.png } /* ( + Icon ) */
.minus { background-image : sample minus.png } /* ( - Icon ) */

HTML

<a href="#" class="button">

  <span class="plus"></span> /* ( + Icon ) */

</a>

JQUERY

jQuery(document).on('click', '.button' ,function() {

  jQuery(this).find('.plus').toggleClass('minus');

});

doesn't work properly, i need to change all - icons to + icon when click on the button, then change class + to - , just for closest button

Answer 1

Try this

jQuery(document).on('click', '.button' ,function() {

   jQuery(this).find('span').toggleClass('minus').toggleClass('plus');

});

Answer 2

One way is to add plus class to all spans then trigger the clicked one only

 jQuery(document).on('click', '.button' ,function() { jQuery('a.button > span').removeClass('minus').addClass('plus'); jQuery(this).find('span').toggleClass('plus').toggleClass('minus'); });

 .plus { border: 1px solid blue } /* ( + Icon ) */ .minus {border: 1px solid red } /* ( - Icon ) */

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="button"> <span class="plus"></span> /* ( + Icon ) */ </a> <br/> <a href="#" class="button"> <span class="plus"></span> /* ( + Icon ) */ </a> <br/> <a href="#" class="button"> <span class="plus"></span> /* ( + Icon ) */ </a>

Answer 3

Try this, I'm not sure if it's what you are looking for.

 $('.button').on('click',function() { var myClass = $(this).find('span').attr("class"); if(myClass == "plus") $('.plus').removeClass().toggleClass('minus'); else $(this).find('span').removeClass().toggleClass('plus'); });

 .plus { background-color : green; } /* ( + Icon ) */ .minus { background-color : red; } /* ( - Icon ) */

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="button"> <span class="plus">Img</span> </a> <a href="#" class="button"> <span class="plus">Img</span> </a> <a href="#" class="button"> <span class="plus">Img</span> </a> <a href="#" class="button"> <span class="plus">Img</span> </a>