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