如何将类与js中的字符串进行比较

问题描述：

我想在我的项目中添加切换星型功能。点击此处我将调用此脚本。此代码无法将starclass的值与字符串中定义的类进行比较。在这里，我试图添加明星/ unstar功能就像Gmail邮件到我的项目。如何将类与js中的字符串进行比较

$(".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代码从我的控制器使用模型这里IM取值。如果我可以在我的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="[email protected]"></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>

删除类请发表您的HTML部分太 –

如果您'的console.log（StarClass）'你怎么弄？比较这样的课是一个坏主意。 – adeneo

答

尝试使用jQuery的is()检查类而不是

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

谢谢..现在如果条件工作，但阿贾克斯方法的成功属性没有反应，你可以检查 –

所以它提醒错误，然后 – adeneo

你可以放弃'.fa'。我知道TS有它，但'.fa- *'图标总是有'.fa'，所以这是一个双重检查 – Martijn

答

如果我的描述正确，你想要有类似gmail的东西，点击来为一个邮件发送星号，c再舔一下去吧？

很难说什么是没有你正在使用的HTML打破，但我会做到这一点通过以下方式：

当加载从后面的邮件，你必须设置类“starMarked”已加星标邮件取决于您在回来的数据中标记星号邮件的方式，您将检查某些值是否为真或等于某个值，然后.addClass（“starMarked”）到该元素。
绑定。点击（函数，它下面的逻辑）（你必须在UI什么列表成员，广场，图标，取决于）来表示邮件的所有元素
的功能该点击然后检查该邮件是否被盯住。由于状态已经由类表示，因此不需要检查从服务器获取的数据，也不需要向服务器发送额外的请求以获取该电子邮件的状态。这节省了服务器上的时间和负载。 注意：您必须确定请求更改服务器上的状态，或者您在前端切换和后端状态的逻辑可能会变得不一致！
前面的切换可以做很多方法，但最简单的方法是使用CSS类“starMarked”来表示它已加星标，并且缺少它表示它不是。它给一鸟两只鸟（外表和逻辑）。如果您需要检查状态，您可以使用.hasClass（“starMarked”）。

当切换类使用.removeClass（）从元素

如何将类与js中的字符串进行比较

相关推荐