我有一个自定义的帖子类型输出为列表。我试图通过Fancybox输出每个li中的一些内联内容。

迄今为止，所有作品都只展示了第一个李的内容。我知道问题是我每次在循环中都调用相同的ID。

我用了最后一个帖子here 要对每个ID进行编号（这很好），我现在可以看到每个链接ID是#content1、#content2、#content3等。

但是如何更改javascript以适用于所有#内容编号？

我的基本脚本是：

    $(\'a[href="#content"]\').fancybox({
        autoSize : false,
        width : 600,
        wrapCSS : \'inline-content\'
    });

这是我的循环，将数字添加到每个ID。。。

    <?php $args = array( 
            \'post_type\' => \'otherwork\',
            \'posts_per_page\' => -1,
            \'orderby\'=>\'date\',
            \'order\'=>\'ASC\'
        );
        $loop = new WP_Query( $args ); $i = 0; ?>

            <article>
                <ul class="otherwork">
                 <?php while ( $loop->have_posts() ) : $loop->the_post(); $i++; ?>
                    <li>
                        <a href="#content<?php echo $i; ?>" ><?php the_post_thumbnail( \'otherwork-thumb\' ); ?></a>
                        <div id="content<?php echo $i; ?>" style="display:none">
                            <h1><?php the_title(); ?></h1>
                            <?php the_post_thumbnail(); ?>
                            <?php the_content(); ?>
                        </div>
                    </li>
                <?php endwhile; ?>
                </ul>
                <div class="clearfix"></div>
            </article>

有关详细信息的HTML输出。。。

    <section id="main" class="span12" role="main">
    <article>
    <ul class="otherwork">
    <li>
    <a href="#content1">
    <div id="content1" style="display:none">
    </li>
    <li>
    <a href="#content2">
    <div id="content2" style="display:none">
    </li>
    </ul>
    <div class="clearfix"></div>
    </article>
    </section>

谢谢你的帮助！

jQuery(\'a[href^="#content"]\').fancybox({
    autoSize : false,
    width : 600,
    wrapCSS : \'inline-content\'
});

$(\'a[href^=#content"]\')

<a class="various "href="#content1">Inline</a>
<div id="content1" style="display:none">Your content</div>

$(".various").fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    fitToView   : false,
    width       : \'70%\',
    height      : \'70%\',
    autoSize    : false,
    closeClick  : false,
    openEffect  : \'none\',
    closeEffect : \'none\'
});