在 WordPress 中动态显示隐藏 div 的颜色框

Question

我有与How do I use colorbox to show hidden divs on my page without hardcoding? 类似的问题，但那里的解决方案对我不起作用。

我正在使用自定义 WP_Query 从自定义帖子类型返回一组缩略图，点击时我想激活颜色框并在叠加层中显示帖子信息。

Javascript：

$(document).ready(function() {
$(".colorbox").colorbox
({
innerWidth: "660px",
transition: "fade", 
href:function(){
var elementID = $(this).attr('id');
return "#" + elementID; }
})
});

WordPress 代码：

<?php
        $clientInfo = new WP_Query();
        $clientInfo->query('post_type=Clients&orderby=date&order=ASC');
        ?>
        <?php $i = 0; ?>
        <?php while ($clientInfo->have_posts()) : $clientInfo->the_post(); ?>
        <?php $i++; ?>
        <a href="#post-<?php the_ID(); ?>" class="colorbox client-logo<?php if ($i == 4 || $i == 8 || $i == 14 || $i == 16 || $i == 20) { echo ' row-last'; } ?>">
        <?php the_post_thumbnail('client-logo'); ?>
        </a>
        <div class="hidden-content">
            <div id="post-<?php the_ID(); ?>">
            <?php the_title(); ?>
            <?php the_content(); ?>
            </div>
        </div>
    <?php endwhile; ?>  

我可以很好地显示缩略图，在我的叠加层中返回整个页面 :) 我猜想我在颜色框 JS 中使用的函数有问题，但它似乎对其他人有用。

我只需要能够在我的叠加层中返回每个 .hidden-content （每个条目的动态内容）的内容，因此我尝试使用该函数而不是简单地设置一个 div （设置 href: ".hidden-content" 在每个单独的叠加层中返回每个 .hidden-content)

谢谢！

Answer 1

而不是这个：

$(".colorbox").colorbox
({
innerWidth: "660px",
transition: "fade", 
href:function(){
var elementID = $(this).attr('id');
return "#" + elementID; }
})

我认为你打算这样做：

$(".colorbox").colorbox
({
inline:true,
innerWidth: "660px",
transition: "fade", 
href:function(){
var elementID = $(this).attr('id');
return "#post-" + elementID; }
})