使用jQuery slideToggle调用进行CSS类管理

我这里有一段代码，在一个html文件中重复多次

<div class="message">
   <label id="slideDown"> Read </label>
   <p id="messageBody" class="hidden"> Body </p>
</div>
<div class="message">
   <label id="slideDown"> Read </label>
   <p id="messageBody" class="hidden"> Body </p>
</div>

---

我的问题是如何获得它，以便当我单击一条消息的标签Read时，它只在其div内的消息体上滑动？

您多次使用ids

slideDown

和

messageBody

，而ID必须是唯一的。当您多次使用ID时会发生什么情况根本没有任何意义，因为您的文档格式不正确

无论如何，解决这个问题的方法是将ID更改为唯一的。一种方法是这样的：

<div class="message">
   <label id="slideDown1"> Read </label>
   <p id="messageBody1" class="hidden"> Body </p>
</div>
<div class="message">
   <label id="slideDown2"> Read </label>
   <p id="messageBody2" class="hidden"> Body </p>
</div>

---

您多次使用id

slideDown

和

messageBody

，而id必须是唯一的。当您多次使用ID时会发生什么情况根本没有任何意义，因为您的文档格式不正确

无论如何，解决这个问题的方法是将ID更改为唯一的。一种方法是这样的：

<div class="message">
   <label id="slideDown1"> Read </label>
   <p id="messageBody1" class="hidden"> Body </p>
</div>
<div class="message">
   <label id="slideDown2"> Read </label>
   <p id="messageBody2" class="hidden"> Body </p>
</div>

---

如果将ID更改为以下类，则可以修复并减少代码：

<div class="message">
   <label id="slideDown1"> Read </label>
   <p id="messageBody1" class="hidden"> Body </p>
</div>
<div class="message">
   <label id="slideDown2"> Read </label>
   <p id="messageBody2" class="hidden"> Body </p>
</div>

HTML

---

下面是一个工作示例：。

如果您将ID更改为如下类，则可以修复并减少代码：

<div class="message">
   <label id="slideDown1"> Read </label>
   <p id="messageBody1" class="hidden"> Body </p>
</div>
<div class="message">
   <label id="slideDown2"> Read </label>
   <p id="messageBody2" class="hidden"> Body </p>
</div>

HTML

---

下面是一个工作示例：.

基于JSFIDLE中的HTML结构（请参阅对magzalez答案的评论回复），以下内容应该可以工作。这不需要更改，以防以后添加更多消息

HTML:

JavaScript:

$('.slideDown').click(function() {
    $(this).closest(".message").find('.messageBody').slideToggle('slow');
});

​

---

下面是一个要测试的JSFIDLE（单击Run）：

基于JSFIDLE中的HTML结构（请参阅对magzalez答案的评论回复），以下应该可以工作。这不需要更改，以防以后添加更多消息

HTML:

JavaScript:

$('.slideDown').click(function() {
    $(this).closest(".message").find('.messageBody').slideToggle('slow');
});

​

---

下面是一个要测试的JSFIDLE（单击运行）：

id

表示唯一标识符。必须为

id

使用唯一字符串

id

表示唯一标识符。您必须为

id

使用唯一的字符串。好的，谢谢，我遇到的困难是消息div的数量会有所不同。我能够为它们中的每一个创建唯一的ID，但是我很难弄清楚如何设置javascript使每一个都有单击事件。@Takkun答案是使用类而不是ID。请查看我的答案和附带的代码/小提琴。虽然magzalez的答案确实是一个更容易处理的方法，但您似乎遇到的问题应该不是什么大问题。关键是从生成html的相同位置生成脚本。这甚至可以成为使用内联脚本的一个很好的理由。我能够通过使用内联脚本成功地做到这一点，谢谢。好的，谢谢，我遇到的困难是消息div的数量会有所不同。我能够为它们中的每一个创建唯一的ID，但是我很难弄清楚如何设置javascript使每一个都有单击事件。@Takkun答案是使用类而不是ID。请查看我的答案和附带的代码/小提琴。虽然magzalez的答案确实是一个更容易处理的方法，但您似乎遇到的问题应该不是什么大问题。关键是从生成html的相同位置生成脚本。这甚至可以成为使用内联脚本的一个很好的理由。我能够通过使用内联脚本成功地做到这一点，谢谢。谢谢你的帮助。如果你愿意帮忙，还有一件事。标签上写着“我在一个标记中”，我很难让你的代码正确执行。这里有一个链接到我的确切设置。你应该更新你的问题以反映不同的HTML结构。顺便说一下，他是对的。如果在我们解决问题后，你只需要要求修复你的实际代码，那么最好把你的实际代码放在那里……这将是基于原始问题的正确答案^_^谢谢你的帮助。如果你愿意帮忙，还有一件事。标签上写着“我在一个标记中”，我很难让你的代码正确执行。这里有一个链接到我的确切设置。你应该更新你的问题以反映不同的HTML结构。顺便说一下，他是对的。如果在我们解决问题后，你只需要要求修复你的实际代码，那么最好把你的实际代码放在那里……这将是基于原始问题的正确答案^_^

.hidden {
    display: none;   
}

$('.slideDown').click(function() {
    $(this).closest(".message").find('.messageBody').slideToggle('slow');
});