Question

我想在项目中添加切换星标功能。我点击后调用此脚本。此代码无法将starclass的值与字符串中定义的类进行比较。在这里，我试图像我的项目一样添加star / unstar功能，就像gmail消息一样。

$(".mailbox-star").click(function (e) {
  debugger;
  e.preventDefault();

  var $this = $(this).find("a > i");
  var glyph = $this.hasClass("glyphicon");
  var fa = $this.hasClass("fa");
  var msgId = $("#MsgId").val();
  var StarClass = $(".mailbox-star i").attr('class'); 
  var StarStatus;

  if (StarClass === "fa text-yellow fa-star-o") {
    StarStatus = true;
  } else {
    StarStatus = false;
  }

  //var starstatus = document.getElementById('ReadstatusStarred');
  if (glyph) {
    $this.toggleClass("glyphicon-star");
    $this.toggleClass("glyphicon-star-empty");
  }

  $.ajax({
    url: "/Home/Starred",
    type: "GET",
    dataType: "json",
    data: {
      ChangeStarredStatus: StarStatus,
      ChangeMessageId: msgId
    },
    success: function (status) {
      if (status) {
        alert(status);
        if (fa) {
          $this.toggleClass("fa-star");
          $this.toggleClass("fa-star-o");
        }
      }
    },
    error: function () {
      alert("starfailed1");
    }
  })
});

// HTML代码这里我使用模型从我的控制器获取值。如果我可以在我的js代码中发送IsStarred参数的值，我的问题将被排序

 <table class="table table-hover table-striped">
                            <tbody>
                                @{int count = 0;}

                                @foreach (var item in Model)
{

    string[] dt = @item.DateTime.ToString().Split(' ');

    <tr title="@item.DateTime" id="ReadMessage" class="@((item.IsRead != true) ? "row row-highlight" : "row")" >
        <td><input type="hidden" value="@item.IsRead" id="Readstatus_@count"></td>
        <td><input type="hidden" value="@item.IsStarred" id="ReadstatusStarred"></td>
        <td><input type="hidden" id="MsgId" value="@item.MessageId" /></td>
        <td><input type="checkbox"></td>
        <td class="mailbox-star" ><a href="#"><i class="@((item.IsStarred==true)? "fa fa-star text-yellow":"fa text-yelow fa-star-o")"></i></a></td>
        <td class="mailbox-name" id="Text1" onclick="location.href='@Url.Action("Read", "Home", new
                                                           {
                                                               NameRead = item.FullName,
                                                               SubjectRead = item.Subject,
                                                               BodyRead = item.Body,
                                                               DateRead = item.DateTime,
                                                               MessageIdRead= item.MessageId,

                                                           })'">
            <a href="#" id="Name">
                @item.FullName
            </a>
        </td>
        <td class="mailbox-subject" id="Text1">

            <b>@item.Subject</b>-
            @if (item.Body == null || item.Body.Length == 0)
            {

            }
            else
            {

                if (item.Body.Length >= 100)
                {
                    @item.Body.Substring(0, 100)
                }
                else
                {
                    @item.Body
                }

            }
        </td>

        <td class="mailbox-attachment"></td>
        <td class="mailbox-date">
            @dt[0]

        </td>


    </tr>
            count++;


}


                            </tbody>
                        </table>
                    </div>

Answer 1

尝试使用jQuery的is()来检查类

var StarStatus = $(".mailbox-star i").is('.fa, .text-yellow, .fa-star-o')

Answer 2

如果我的描述正确，你想拥有像gmail这样的东西，点击为邮件加注星标，再点击一下就可以了吗？

如果没有您正在使用的HTML，很难说是什么会被破坏但我会按以下方式执行此操作：

从后面加载邮件时，你必须设置“starMarked”类到已加星标的邮件，具体取决于你如何标记从后面传入的数据中的已加星标的邮件，你会检查某些内容是否为真或等于某个值然后 .addClass（“starMarked”）到该元素。
将 .click（执行以下逻辑的功能）绑定到代表邮件的所有元素（列表成员，方形，图标，取决于您在UI中的内容）
该点击的功能然后检查该邮件是否被盯着。由于状态已经用类表示，因此无需检查从服务器提取的数据，或者向服务器发出额外请求以获取该电子邮件的状态。这节省了服务器上的时间和负载。 注意：您必须确定更改服务器状态的请求已经完成，或者您在前端切换和后端状态的逻辑可能会变得不一致！
在前面切换可以通过多种方式进行，但最简单的方法是使用CSS类“starMarked”来表示它的已加星标，并且缺少它来表示它不是。它给了两只一石（看起来和逻辑）。如果您需要检查状态，可以使用 .hasClass（“starMarked”）。

切换课程时，使用 .removeClass（）从元素中删除该课程

我怎样才能将类与js中的字符串进行比较

2 个答案: