CODEWITHSUNDEEP
javascriptjqueryhtml
chuckd
chuckd

Reputation: 14540

How do I change a span's class in javascript

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>

Upvotes: 0

Views: 553

Answers (2)

drs9222
drs9222

Reputation: 4508

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");
  });

Upvotes: 0

Oka
Oka

Reputation: 26355

Since you're using jQuery:

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

Upvotes: 1

Related Questions