1

私はこのようなHTML構造を持っています:-

<article id="a_post" class="a_post">
<div id="thumbnail">
<img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/>
</div>
<div id="instant_video" class="instant_video">
<span class="close"></span>
    // Some content here
</div>
</article>    
<article id="a_post" class="a_post">
<div id="thumbnail">
<img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/>
</div>
<div id="instant_video" class="instant_video">
<span class="close"></span>
    // Some content here
</div>
</article>

上記の HTML では<div id="instant_video" class="instant_video"> <span class="close"></span> // Some content here </div>、 の css がありdisplay:none;ます。私がやりたいのは、誰かがクリックしたときだけ <img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/>です。cssで表示がnoneに設定されているinstant_videoのIDでdivをスライドさせたいです。

次に、誰かがクローズのクラスでスパンをクリックすると、その特定の div が再びフェードアウトします。

しかし、私は本当に素人なので、jQueryセレクターに深刻な問題があります。

私が使用しているコードは、id を持つすべての非表示の div でスライドし、instant_videoそこに問題が残っています。

私がしたいのは、クリックした画像を含む article タグ内の div だけを下にスライドすることだけです。

私が現在使用しているコードは次のとおりです:-

jQuery(document).ready(function() {
    jQuery('img#shine').click(function() {
        jQuery('.instant_video').slideDown('fast')
    }); 
});
jQuery(document).ready(function() {
    jQuery('.close').click(function() {
        jQuery('.instant_video').fadeOut('slow')
    }); 
});
4

5 に答える 5

5

まず、特定の要素に複数の要素を含めることは許可されていませんid。id属性はドキュメント内で一意である必要があります。

問題の解決策は、img要素にclassではなく属性idを指定し、jQueryのトラバーサルメソッド（closest and findこの場合）を使用して関連する要素を取得することです。

imgしたがって、要素にクラスがあると仮定すると、次のshineように実行できます。

$(document).ready(function() {
    $('img.shine').click(function() {
        $(this).closest('article').find('.instant_video').slideDown('fast');
    });
    $('span.close').click(function() {
        $(this).closest('.instant_video').fadeOut('slow');
    });
});
于 2012-08-28T10:01:53.143 に答える
1

これを試して：

jQuery(document).ready(function($) {
   $('.a_post img').click(function() {
      $(this).closest('.a_post').find('.instant_video').slideDown('fast')
   });

   $('.close').click(function() {
      $(this).closest('.instant_video').fadeOut('slow')
   });
});

$(document).ready二度持つ必要はありません

また、idタグは常に一意である必要があります

クリックしたことに関連するものを取得するためにinstant_video使用する必要があるのはたくさんあるからですclosestimg

于 2012-08-28T10:01:21.947 に答える
1

ID は一意であることに注意してください。1 つのページに同じ ID を持つ 2 つの要素を含めることはできません。

ただし、次のようにしてみてください: #shineID の代わりにクラスを img に割り当てます。

<img class="shine" src="wp-content/themes/dabanggknight/images/play.png"/>

次に、次のコードを使用します。

jQuery(function(){
    jQuery('img.shine').on('click', function(){
        jQuery(this).closest('.a_post').find('.instant_video').slideDown('fast');
    });

    jQuery('.close').on('click', function(){
        jQuery(this).closest('.a_post').find('.instant_video').fadeOut('slow');
    }); 
});​

（または短く、これを試してください:)

$(function(){
    $('img.shine').on('click', function(){
        $(this).closest('.a_post').find('.instant_video').slideDown('fast');
    });

    $('.close').on('click', function(){
        $(this).closest('.a_post').find('.instant_video').fadeOut('slow');
    }); 
});​
于 2012-08-28T10:05:33.967 に答える
0

次のようなものを試してください。

$('#shine').click(function() {
    $(this).closest('.a_post').find('.instant_video').slideDown('fast');
});
$('.close').click(function() {
    $(this).closest('.instant_video').fadeOut('slow');
});

これが実際のライブデモです。

于 2012-08-28T10:08:02.930 に答える
-1

IDはページに固有である必要があります。つまり、クラスごとに選択します。

jQuery('.instant_video')

IDでの選択はこんな感じ

jQuery('#instant_video')
于 2012-08-28T10:00:52.777 に答える