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

我已经设置了一个小脚本来显示和隐藏一个 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 会在点击时显示/隐藏，其余的将保持不事件状态。

提前致谢

最佳答案

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

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

关于javascript - 使用 Javascript 显示和隐藏消息，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33496548/

Message

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