0

特定のテキストを表示/非表示にできるようにしたい (jqery を使用)。問題は、同じ ID を持つこのテキスト タグのバージョンが複数あることです。親の上にカーソルを置いたときに、特定の子でアニメーションを実行できるようにしたいのですが、すべてのテキストで実行するのではありません。同じ ID を持つブロック。

これが私のコードです：

HTML:

<p>Move your cursor over the posts below to read more.</p>
<div id="postContainer">
    <div id="post">
        <h4>Title 1</h4>
        <h5>Date goes here</h5>
        <p id="postDetails">Blah Blah Blah, this text is hidden until you hover over it's own parent.</p>
    </div>
</div>
<div id="postContainer">
    <div id="post">
        <h4>title 2</h4>
        <h5>Date goes here</h5>
        <p id="postDetails">This is the second hidden text, but it is revealed when you hover over the first post as well.</p>
    </div>
</div>

CSS:

#post
{
    background:#DDDDDD;
}
#postDetails
{
    display"none;
}

Jクエリ:

<script>
    $('#post').mouseenter(function() {
      $('#postDetails').slideDown("slow");
    });
    $('#post').mouseleave(function() {
      $('#postDetails').slideUp("slow");
    });
</script>

それぞれに異なる名前を持つさまざまな div id の束を作成せずに、1 つだけを明らかにする方法はありますか? このようなボックスが 20 個あります (それらはすべて同じに見えるはずです)。20 個すべてを同時に表示すると、ユーザーがその次のボックスにカーソルを合わせたときに、一度に 1 つだけ表示できるようにしたいと考えています。ページの長さを拡張し、ユーザーを悩ませます。

4

4 に答える 4

3

複数の要素がある場合は、id の use クラスを使用する必要があります。

jsfiddle を参照してください。マークアップを一部変更しました。

デモ

http://jsfiddle.net/saorabhkr/xtrpK/1/

于 2012-10-09T19:46:41.853 に答える
1

ここに作業デモがあります

http://jsfiddle.net/CLgYB/

説明：

そのためにクラスを使用する必要があります..

HTMLコード

<p>Move your cursor over the posts below to read more.</p>
<div class="postContainer">
    <div class="post">
        <h4>Title 1</h4>
        <h5>Date goes here</h5>
        <p class="postDetails">Blah Blah Blah, this text is hidden until you hover over it's own parent.</p>
    </div>
</div>
<div class="postContainer">
    <div class="post">
        <h4>title 2</h4>
        <h5>Date goes here</h5>
        <p class="postDetails">This is the second hidden text, but it is revealed when you hover over the first post as well.</p>
    </div>
</div>​

jQuery スクリプト

$

('.post').mouseenter(function() {
      $(this).children('.postDetails').slideDown("slow");
    });
    $('.post').mouseleave(function() {
     $(this).children('.postDetails').slideUp("slow");
    });​
于 2012-10-09T19:42:59.913 に答える
1

ID の代わりにクラスを使用する必要があります。ID は一意の要素にのみ使用する必要があります。すべての投稿をループして、各投稿に mouseenter および mouseleave イベントを追加できます。this 参照を使用して、個々の投稿と postDetails を対象にします。

$('.post').each(function(){
    $(this).mouseenter(function() {
      $(this).children('.postDetails').slideDown("slow");
    }).mouseleave(function() {
      $(this).children('.postDetails').slideUp("slow");
    });
});
​

ここに jsfiddle の例をまとめましたhttp://jsfiddle.net/pimlinders/b2ASK/ </p>

于 2012-10-09T19:47:28.567 に答える
0 
$('#post').mouseenter(function() {


// while in here, the particular $('#post') which has been entered can be accessed as $(this)



     $(this).find('#postDetails').slideDown("slow");
});

...しかし、実際には異なるdivIDを使用する必要があります。それがIDと呼ばれる理由です。

于 2012-10-09T19:39:29.477 に答える