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