使用 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');
});