javascript - 使用 Javascript 显示和隐藏消息

Question

我设置了一个小脚本来显示和隐藏一个 div..

$('.message-head').click(function () {
    $('.message-preview').toggle('slow');
});

完美地工作，因为它应该做的。我的问题是我在页面上有多个 html 标记的实例，它们在 foreach 循环中..

<div class="two-three-col message-head">
    <h4>@message.Subject</h4>
    <div class="message-preview">
        @Html.Raw(@message.Body)
    </div>
</div>

这基本上是针对已被切碎和更改很多并留给我修复的消息系统；不是最好的 javascript 我很困惑。那么我该如何修改 js，以便如果我点击说消息 1，那么只有消息 1 会在点击时显示/隐藏，其余的将保持不活动状态。

提前致谢

Answer 1

您可以使用 this 关键字来引用引发事件的元素。从那里您可以遍历 DOM 以找到相关的 .message-preview 元素。试试这个:

$('.message-head').click(function () {
    $(this).find('.message-preview').toggle('slow');
});