试图用jQuery切换html内容

Question

嘿所以我有这个HTML，我想在点击时更改图标

<span class="esconderInput" id="esconderInput">
    <a href="#"><i class="fa fa-minus-square"></i></a>
</span>

我试图用这个代码用jQuery改变它

$('#esconderInput').on('click',function(){
    if ( $( '#esconderInput' ).html() == '<a href="#"><i class="fa fa-minus-square"></i></a>' ) {
        $( this ).html( '<span class="esconderInput" id="esconderInput"><a href="#"><i class="fa fa-plus-square"></i></a></span>' );
        console.log( $( this ).html() );
    } else {
        $( this ).html( '<span class="esconderInput" id="esconderInput"><a href="#"><i class="fa fa-minus-square"></i></a></span>' );
        console.log( $( this ).html() );
    }
});

它在我第一次点击时起作用，但不是在下面，任何想法？

由于

Answer 1

这是你想要的吗？ 使用更改minus和plus之间的类。

$('#esconderInput').on('click',function(){

   $(this).find("i").toggleClass("fa fa-minus-square fa fa-plus-square");
} );

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="esconderInput" id="esconderInput"><a href="#"><i class="fa fa-minus-square"></i></a></span>

Answer 2

请改为尝试更改图标元素的类。

$('#esconderInput').on('click', function () {
  var $icon = $(this).find('a i');
  if ($icon.hasClass('fa-minus-square')) {
    $icon.removeClass('fa-minus-square').addClass('fa-plus-square');
  } else {
    $icon.removeClass('fa-plus-square').addClass('fa-minus-square');
  }
});

Answer 3

请尝试以下代码：

$('#esconderInput').on('click',function()
{
     if ($( '#esconderInput' ).html() == '<a href="#"><i class="fa fa-minus-square"></i></a>' ) 
     {
          $( this ).html( '<a href="#"><i class="fa fa-plus-square"></i></a>' );
          console.log( $( this ).html() );
     }
     else 
     {
          $( this ).html( '<a href="#"><i class="fa fa-minus-square"></i></a>' );
          console.log( $( this ).html() );
     }
} );