1

ここに、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>

messageBodyをスライドダウンするために使用されるjQuery。

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

私の質問は、「1つのメッセージの読み取り」というラベルをクリックすると、その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

slideDownIDをmessageBody複数回使用していますが、 IDは一意である必要があります。IDを複数回使用した場合に何が起こるかは、ドキュメントの形式が正しくないため、まったく意味がありません。

とにかく、これを修正する方法は、IDを一意になるように変更することです。1つの方法は次のようになります。

<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 に答える