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');

});

无法正常工作，我需要在点击按钮时将所有图标更改为+图标，然后将类+更改为 - ，仅用于最近的按钮

Answer 1

试试这个

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

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

});

Answer 2

一种方法是将plus类添加到所有跨度，然后仅触发单击的

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

试试这个，我不确定它是不是你想要的。

＆＃13;

＆＃13;

$('.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');

});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;