Question

我有一个ul元素，其中的项目如下所示，我想在span和'glyphicon-ok greenstatus'之间更改'glyphicon-remove redstatus'元素的分类。

这是我的HTML和JS，我想根据从帖子返回的条件更改li id="overviewlink" span类。

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

因为您正在使用jQuery：

完整文档：http://api.jquery.com/

Answer 2

您可以使用addClass和removeClass执行此操作：

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

如何在javascript中更改span的类

2 个答案: