Question

无法找到以下场景的逻辑：

循环中有六个帖子，每个帖子都有一个使用自定义字段设置的颜色值。当鼠标悬停在帖子的一个摘录上时，它应该将摘录的背景更改为使用自定义字段设置的颜色。

它正在工作但是在一个帖子上方悬停会显示每个帖子的隐藏颜色，而不仅仅是一个帖子。

有什么方法可以将post 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');

}）;

显然上面的代码因为三人组而无法工作。有没有办法在JQuery中获取$ display var然后对它应用一些css？

Answer 1

好的，我弄清楚了：从循环（具有图像的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中，并使用JQuery将该div中的第一个元素作为目标。在我的例子中，包装内的第一个元素是具有我想要悬停在图像上时显示的独特背景颜色的div。

请注意， .wrap ， .pic 和 .indextitle_seethrou 类在我的CSS中具有绝对定位，即。 indextitle_seethrou 类还有一个 display：none CSS属性。

谢谢。

自定义颜色悬停在循环中的每个帖子上

1 个答案: