How do I change a span's class in javascript

Question

I have a ul element with items in it like below and I want to change out the span element's class between 'glyphicon-ok greenstatus' and 'glyphicon-remove redstatus' .

Here is my HTML and JS where I want to change the li id="overviewlink" span class based on the condition returning from my post.

 $.post(url, { id: id, summary: summary, complete: completed }, function(response) { var jsonObj = JSON.parse(response); if (jsonObj.Completed == 'complete') { // change span class in overview to 'glyphicon-ok greenstatus' } else { // change span class in overview to 'glyphicon-remove redstatus' } if (jsonObj.StepsToList == '0') { //change to enum drop down } else { // change enum drop down to message showing number of steps } $("#successmessage").show().delay(5000).fadeOut(); }) .fail(function() { alert("error"); }); 

 <ul id="managelinks" class="nav nav-stacked"> <li id="overviewlink"> <a href="#overviewlink">Overview @if (Model.Overview.Completed == ListingComplete.Complete) { <span class="glyphicon glyphicon-ok greenstatus" aria-hidden="false"></span> } else { <span class="glyphicon glyphicon-remove redstatus" aria-hidden="false"></span> } </a> </li> <li id="detailslink"> <a href="#detailslink">Details @if (Model.Details.Completed == ListingComplete.Complete) { <span class="glyphicon glyphicon-ok greenstatus" aria-hidden="false"></span> } else { <span class="glyphicon glyphicon-remove redstatus" aria-hidden="false"></span> } </a> </li> </ul> 

Answer 1

Since you're using jQuery:

• .addClass()
• .removeClass()
• .toggleClass()

Full documentation: http://api.jquery.com/

Answer 2

You can use addClass and removeClass to do this:

$.post(url, {
    id: id,
    summary: summary,
    complete: completed
  }, function(response) {
    var jsonObj = JSON.parse(response);

    if (jsonObj.Completed == 'complete') {
      // change span class in overview to 'glyphicon-ok greenstatus'
      $("#overviewlink span.glyphicon").addClass("glyphicon-ok");
      $("#overviewlink span.glyphicon").addClass("greenstatus");
      $("#overviewlink span.glyphicon").removeClass("glyphicon-remove");
      $("#overviewlink span.glyphicon").removeClass("redstatus");
    } else {
      // change span class in overview to 'glyphicon-remove redstatus'
      $("#overviewlink span.glyphicon").addClass("glyphicon-remove");
      $("#overviewlink span.glyphicon").addClass("redstatus");
      $("#overviewlink span.glyphicon").removeClass("glyphicon-ok");
      $("#overviewlink span.glyphicon").removeClass("greenstatus");
    }

    if (jsonObj.StepsToList == '0') {
      //change to enum drop down
    } else {
      // change enum drop down to message showing number of steps
    }
    $("#successmessage").show().delay(5000).fadeOut();
  })
  .fail(function() {
    alert("error");
  });