How do I change icon with Jquery?-CodePudding

I have any AJAX call that allow to select an item, I'm displaying the selected item with a darker background and the icon marked selected.

I can change the background but when I attempt to change the icon doesn't work. Somebody can explain what I'm doing wrong?

Here it is the code

$("#accounts-list").on('click', '.nav-link', function () {
  var object_id = $(this).data('object-id');
  $.ajax({
    url: "url_to_ajax_call.php",
    data: {
      'account_id': object_id
    },
    type: 'POST',
    success: function (response) {
      // remove class where previously selected
      $(".nav-link").removeClass("bg-soft-primary"); // background
      $(".nav-link>span.fa-check-circle").removeClass("fa-check-circle").addClass("fa-circle"); // remove checked icon

      // apply selected class to the new item
      let item = $('.nav-link[data-object-id='   object_id   ']');
      item.addClass('bg-soft-primary'); // apply background
      $(item   ">span.fa-circle").removeClass("fa-circle").addClass("fa-circle"); // select checked icon
    }
  })
})

    <div id="accounts-list">
      <ul >
        <li >
          <div 
               data-object-id="1">
            <span ></span>
            Item 1
          </div>
        </li>
        <li >
          <div 
               data-object-id="2">
            <span ></span>
            Item 2
          </div>
        </li>
        <li >
          <div 
               data-object-id="3">
            <span ></span>
            Item 3
          </div>
        </li><li >
        <div 
             data-object-id="4">

          <span ></span>
          Item 4
        </div>
        </li>
        </li>
      </ul>
    </div>

Thank you

CodePudding user response：

In $(item ">span.fa-circle"), item is not a string to be used has a selector... It is a jQuery object.

So do it like this:

item.find("span.far")

Ho! To notice any effect, the should be two fontAwesome classes (one added and one different removed ;)

.removeClass("fa-check-circle").addClass("fa-circle")

Another way would be:

.toggleClass("fa-check-circle fa-circle")