0

找不到以下场景的逻辑：

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

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

有什么方法可以将帖子 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 吗？

4

1 回答 1

0

好的，我想通了：从循环中（具有图像的 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 -->

查询：

$(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 属性。

谢谢你。

于 2011-08-11T08:06:02.517 回答