0

我有很多<li>元素，其中一些处于正常状态，而另一些处于突出显示状态（具有“hasNews”类）：

<ul class="companies">
    @foreach (var item in Model)
      {
        <li id='company_@(item.Id)' data-id='@item.Id' @{if (item.hasNews) { <text>class="hasNews"</text>} } >
                  <a>@item.Name</a>
        </li>
      }
</ul>

我希望当我单击 any<li>时，将其 Id 发送给控制器，将该公司设置为已读，如果回调为真，则从中删除“hasNews”类<li>。我在控制器中有方法可以做到这一点。<li>但是如果回调为真，我需要 jquery 的帮助来从单击的项目中删除“hasNews”类。使用以下代码，我向控制器发送请求，执行我的操作并返回false或true。但是该<li>项目仍然突出显示：

$('.companies li ').click(function (e) {
    url = '@Url.Action("SetCompanyNewsAsRead", "Company")';
    var data = { id: $(this).attr('data-id') };
    $.post(url, data, function (result) {
      if (result.success) {

      $(this).removeClass('hasNews');  //this does not remove "hasNews" class.

     }
   });
});

我该如何解决这个问题？

编辑： 我想补充：其中一项<li>是“当前”。我这样做了：

$('#company_' + currentItemId).addClass('current');

这项工作。这可以防止“hasNews”类删除吗？

4

1 回答 1

4

问题是this内部（回调）函数与外部函数不同 -this根据函数的调用方式设置，它绝对不是从包含函数继承的。在外部函数的变量中保存对它的引用，内部函数可以访问它：

$('.companies li ').click(function (e) {
    url = '@Url.Action("SetCompanyNewsAsRead", "Company")';
    var theLI = this,   // <--------- Save reference to this
        data = { id: $(this).attr('data-id') };
    $.post(url, data, function (result) {
      if (result.success) {

        $(theLI).removeClass('hasNews');  //this does not remove "hasNews" class.

     }
   });
});

有关thisJavaScript 工作原理的更完整说明，请查看MDN。

编辑：要回答您的编辑，不，其他类的存在应该没有区别。

于 2013-02-15T08:41:24.747 回答