0

次のシナリオのロジックが見つかりません:

ループには 6 つの投稿があり、各投稿にはカスタム フィールドで色の値が設定されています。投稿の抜粋の 1 つにマウスを合わせると、抜粋の背景がカスタム フィールドで設定された色に変更されます。

機能していますが、1 つの投稿にカーソルを合わせると、1 つの投稿だけでなく、すべての投稿の非表示の色が表示されます。

投稿 ID を変数に格納し、その変数を JQuery の addClass/removeClass 関数に渡す方法はありますか?

ありがとうございました。

HTML:

<?php if( $2nd_query->have_posts() ) : ?>
    <?php while( $2nd_query->have_posts() ) : $2nd_query->the_post(); ?>
            <?php $display = get_field('color_setting');?>
            <div class="threesome">
            <div id="<?php echo $display ?>" class="indextitle_seethrou">
                <h2 class="indextitle"><a href="<?php the_permalink() ?>" title=""><?php the_title(); ?></a></h2>
            </div>  

                <?php
                if ( has_post_thumbnail() ) {
                the_post_thumbnail('featured_thumb');
                } else {
                } ?>
        </div>
    <?php endwhile; ?>
    <?php else : ?>

それから私はこのJqueryを持っています:

$('.threesome').hover(function() {
$('.indextitle_seethrou').stop(true, true).fadeIn('fast');
            }, function() {
$('.indextitle_seethrou').stop(true, true).fadeOut('fast');

});

上記のコードは、threesome クラスのため、明らかに機能しません。JQuery で $display var を取得し、css を適用する方法はありますか?

4

1 に答える 1

0

OK、私はそれを理解しました：ループから（画像と絶対位置を持つ目に見えないdivを持つdiv）：

<div class="wrap">
<div id="<?php echo $display ?>" class="indextitle_seethrou">
</div>
<div class="pic">
    <?php
    if ( has_post_thumbnail() ) {
        the_post_thumbnail('featured_thumb');
    } else {
    } ?>
</div>
</div><!--wrap ends -->

JQuery:

$(document).ready(function()
{
 $(".wrap").mouseover(function ()
{  
 $(this).children('div:first').stop(true, true).fadeIn('fast');
});
 $(".wrap").mouseout(function ()
{ 
 $(this).children('div:first').stop(true, true).fadeOut('fast');
});
});

ページには多数の投稿があり、それぞれに固有の色の値が $display 変数に格納されています。ホバー時に画像の上に不透明なオーバーレイとして一意の色を表示したかったのです。最初の方法ではクラスをセレクターとして使用しましたが、画像にカーソルを合わせるとすべてのオーバーレイが表示されました。クラスをセレクターとして使用する代わりに、すべてを div でラップし、その div の最初の要素を JQuery でターゲットにしました。私の場合、ラップ内の最初の要素は、画像にカーソルを合わせたときに表示したい独自の背景色を持つ div です。

.wrap 、 .pic、および.indextitle_seethrouクラスには、CSS で絶対配置があることに注意してください。.indextitle_seethrouクラスには、display:none CSS プロパティもあります。

ありがとうございました。

于 2011-08-11T08:06:02.517 に答える