Question

我有一些代码可以提取wordpress帖子，我想只是拉入图片。然后，当单击图像时，更多信息将显示在页面右侧的div中。我自己尝试了一些东西，但似乎无法让它正常工作。

这是我的wordpress代码，我正在增加帖子以添加showdiv-1，showdiv-2等...然后将信息div增加为storeinfo-1，storeinfo-2等......

可点击的徽标：

<ul class="store_list">
            <?php $i = 1; ?>
            <?php 
            $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
            query_posts('cat=3'.$cat.'&order=ASC&showposts=100&paged=' . $paged);
            if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

                <li class="one-third nomargin">

                    <a id="showdiv-<?php echo $i; ?>" class="store-logo" title="View <?php echo $post->post_title; ?> shop info"><?php
                    $thumbnail_id = get_post_meta($post->ID, 'Store Logo', true);
                    echo wp_get_attachment_image($thumbnail_id, 'Store Logo');
                    ?></a>

                </li>

                <?php $i++; ?>
                <?php endwhile; else: ?>
                <p><?php _e('No shops to view in this category.'); ?></p>
                <?php endif; ?>
        </ul>

显示何时点击徽标的Div：

<?php $m = 1; ?>
        <?php
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        query_posts('cat=3'.$cat.'&order=ASC&showposts=100&paged=' . $paged);
        if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <div id="storeinfo-<?php echo $m; ?>">
            <h1 class="shop-name"><?php echo $post->post_title; ?></h1>
            <p class="shop-telephone nop">Tel: <?php getCustomField('Telephone'); ?></p>               

            <div class="shop-openinghours">
                 <?php the_content(); ?>
            </div>
            <p class="shop-website nop"> <a target="_blank" href="http://<?php getCustomField('Website'); ?>">Visit Site</a></p> 
            </div>

        <?php $m++; ?>
        <?php endwhile; else: ?>
        <p><?php _e('No shops to view in this category.'); ?></p>
        <?php endif; ?>

提前致谢！

Answer 1

您可以按照以下步骤执行此操作;

你已经给了ids，好的。这些图像与特定信息div相关。（我假设store-info- * divs首先被隐藏）。只需编写一个jquery函数。我正在提供您更新的代码，以及我新实现的jquery代码。

编辑：为了在点击显示信息时隐藏以前的内容，我在store-info- * div中添加了一个类，并在我的实现中添加了jquery代码来隐藏所有打开的商店并显示点击一个。

<ul class="store_list">
<?php $i = 1; ?>
<?php 
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('cat=3'.$cat.'&order=ASC&showposts=100&paged=' . $paged);
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <li class="one-third nomargin">

        <a id="showdiv-<?php echo $i; ?>" class="store-logo" title="View <?php echo $post->post_title; ?> shop info" class="images"><?php
        $thumbnail_id = get_post_meta($post->ID, 'Store Logo', true);
        echo wp_get_attachment_image($thumbnail_id, 'Store Logo');
        ?></a>

    </li>

    <?php $i++; ?>
    <?php endwhile; else: ?>
    <p><?php _e('No shops to view in this category.'); ?></p>
    <?php endif; ?>
</ul>



<?php $m = 1; ?>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('cat=3'.$cat.'&order=ASC&showposts=100&paged=' . $paged);
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div id="storeinfo-<?php echo $m; ?>" style="display:none;" class="stores">
<h1 class="shop-name"><?php echo $post->post_title; ?></h1>
<p class="shop-telephone nop">Tel: <?php getCustomField('Telephone'); ?></p>               

<div class="shop-openinghours">
     <?php the_content(); ?>
</div>
<p class="shop-website nop"> <a target="_blank" href="http://<?php getCustomField('Website'); ?>">Visit Site</a></p> 
</div>

<?php $m++; ?>
<?php endwhile; else: ?>
<p><?php _e('No shops to view in this category.'); ?></p>
<?php endif; ?>

jQuery(function ($) {
    $(".images").on('click', function() {
        $(".stores").hide();
        var idObj = $(this).attr("id").split("-");
        var id = idObj[1];
        $("#storeinfo-" + id).show();
    });
});

显示/隐藏多个WordPress条目

1 个答案: