1

我这里有一段代码在一个 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>

jQuery 用于向下滑动 messageBody。

$('#slideDown').click(function() {
  $('#messageBody').slideToggle('slow');
});

我的问题是我怎样才能得到它，以便当我单击标签阅读一条消息时，它只会滑下其 div 内的 messageBody ？

4

3 回答 3

4

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

HTML

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

JS

$('.slideDown').click(function() {
  $(this).next('.messageBody').slideToggle('slow');
});

这是一个工作示例：http: //jsfiddle.net/rtZsJ/。

于 2012-04-21T03:57:37.630 回答
2

您正在多次使用 id，而 id 必须是唯一的slideDown。messageBody当您多次使用 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>

js：

$('#slideDown1').click(function() {
  $('#messageBody1').slideToggle('slow');
});
$('#slideDown2').click(function() {
  $('#messageBody2').slideToggle('slow');
});
于 2012-04-21T03:50:26.230 回答
1

根据您的 jsFiddle 中的 HTML 结构（请参阅对 magzalez 答案的评论回复），以下内容应该有效。如果您稍后添加更多消息，这不需要更改。

HTML：

<div class="message">
    <h2 class="messageSubject">Subject<label class="slideDown"> Read </label></h2>
    <label class="messageSender"> Sender </label>
    <div class="bodyWrapper">
        <p class="messageBody hidden"> Body </p>
    </div>
</div>
<div class="message">
    <h2 class="messageSubject">Subject<label class="slideDown"> Read </label></h2>
    <label class="messageSender"> Sender </label>
    <div class="bodyWrapper">
        <p class="messageBody hidden"> Body </p>
    </div>
</div>

CSS：

.hidden {
    display: none;   
}

JavaScript：

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

​</p>

这是一个要测试的 jsFiddle（单击运行）：http: //jsfiddle.net/willslab/7ytZR/2/

于 2012-04-21T04:26:47.150 回答