Javascript 类的特定于目标的实例

我正在尝试从用户单击的具有特定类的div的特定实例中删除一个类。例如，我有一个类的三个实例，比如说未读，然后我想从这个div实例中删除一个类。这可能是一个非常简单的解决方案，但在任何地方都找不到答案

我尝试使用$this，但显然不起作用，它仍然会从所有未读实例中删除该类

用户基本上会单击div，它会将他们的消息标记为read，从而添加一个新类，直观地向用户显示他们已经阅读了消息

HTML

---

考虑到您发布的jQuery，解决方案似乎很简单：

// selects all the elements of class "unread", and binds a click event-handler:
$(".unread").click(function () {
    // this/$(this) will always be the item that was interacted with:
    $(this).removeClass("unread");
});

为了确保单击的元素的类型正确，以确保删除类名后匿名函数不会保持绑定状态，因为事件绑定到DOM节点，而不是具有该类名的DOM节点，因此可以使用委派事件处理，将单击检测/处理绑定到父元素并提供其必须匹配的选择器：

// selecting the elements with the 'unread' class-name:
$(".unread")
// moving to their closest 'ul' ancestor element(s):
.closest('ul')
// using 'on()' to bind a click event-handler to that ancestor,
// the anonymous function will be triggered only if the clicked-element
// matches the selector (the second string):
.on('click', '.unread', function () {
    // removing the 'unread' class from the clicked-element:
    $(this).removeClass("unread");
});

参考资料：

. .

---

什么是您尝试过但不起作用的代码？我没有添加它，因为我特别熟悉Javascript和jQuery，而且我尝试过的任何东西都可能完全错误。我认为这将是一个很容易回答的问题，所以到目前为止没有添加我的尝试-你认为我有必要重新编写它来添加到我原来的帖子中吗？如果是的话，你能至少展示一下你的HTML，解释一下用户做了什么/将要做什么，以及什么时候这个“类的特定实例”元素会受到影响吗？为了什么？至于你声称[$this]显然不起作用，它仍然将该类添加到所有实例中。。。这完全取决于您调用$this的上下文以及此时的$this和$this是什么。@NikkiMather如果您发布代码，我们可以看到您的缺陷是什么……只需编辑问题并添加它。您的JS是否类似于$.unread.onclick，函数{$this.addClassread；}；？这是不起作用的吗？没错。谢谢大卫，当我试着用这个自己写的时候，我把事情复杂了很多。对于这个荒谬的问题，我深表歉意，但我们仍然非常感谢您的回答。@Nikki:我很高兴能够提供帮助，但请以后在您提出问题时发布相关代码。甚至，特别是，如果它坏了：告诉我们你试过了，并且做过尝试。即使只是提供一个你正在尝试做的事情的洞察力。请注意，即使在类被移除之后，这个处理程序仍然保持连接，所以如果你在处理程序中做了一些其他的事情，比如“Alct'点击。未读的元素”，你可能会考虑委托。@ Asad：同意，我已经编辑过添加那个委派解决方案。谢谢你的建议！David，我不确定这是否值得提出一个全新的问题，但在显示和隐藏单击div的特定实例方面，这将如何工作？我当前拥有的代码是$.close-textarea.clickfunction{$.reply-with-textarea.show；$.reply-textarea.hide；}；，但是我只想显示和隐藏这些div的特定实例，它们位于closetextarea的clicked实例中。目前，它显示并隐藏页面上的所有实例。

// selects all the elements of class "unread", and binds a click event-handler:
$(".unread").click(function () {
    // this/$(this) will always be the item that was interacted with:
    $(this).removeClass("unread");
});

// selecting the elements with the 'unread' class-name:
$(".unread")
// moving to their closest 'ul' ancestor element(s):
.closest('ul')
// using 'on()' to bind a click event-handler to that ancestor,
// the anonymous function will be triggered only if the clicked-element
// matches the selector (the second string):
.on('click', '.unread', function () {
    // removing the 'unread' class from the clicked-element:
    $(this).removeClass("unread");
});