时间戳

首页 > 解决方案 > 如何分离来自 php 的 html/javascript 中的程序列表？

javascript - 如何分离来自 php 的 html/javascript 中的程序列表？

问题描述

我有一个 html/php 代码，如下所示，它显示来自 wordpress 的链接列表。

html/php:

<header class="entry-header container grid-flex">
    <div class="flex-item -sm-50">
        <button>Thumbs</button> // Line Z
    </div>
</header><!-- .entry-header -->
<div class="entry-content">
    <?php
    echo "<pre>"; print_r($all_list); echo "</pre>";   // Line A
    echo "<hr>";
    echo "Active List<br>";
    echo "<pre>"; print_r($active_list); echo "</pre>";   // Line B
    echo "<hr>";
    echo "Passive List<br>";
    echo "<pre>"; print_r($passive_list); echo "</pre>";   // Line C
    // Load the thumbnails view
    get_template_part( 'parts/content-list-thumbs' );     // Line D
    ?>
</div>

A 行显示以下链接列表：

https://www.abcd.com/en/programs/abcdef/

https://www.abcd.com/en/programs/pdsfhdf

https://www.abcd.com/en/programs/sdfhsw/

https://www.abcd.com/en/programs/dhdhdw/

B 行显示以下链接：

https://www.abcd.com/en/programs/abcdef/

https://www.abcd.com/en/programs/pdsfhdf

C 行显示以下链接：

https://www.abcd.com/en/programs/sdfhsw/

https://www.abcd.com/en/programs/dhdhdw/

来自D 行的 content-list-thumbs文件中的代码如下所示，仅在单击上面html/php代码中的Z 行的按钮时才会调用它。

html/js 代码：

<ul id="list-thumbs">
    <?php
    while (have_posts()) : the_post();
        ?>
        <li class="list-grid__thumb list-grid__item">
            <a class="list-grid__img-link" href="<?php echo esc_url(get_the_permalink()); ?>">
                <?php if (has_post_thumbnail()) { ?>
                    <?php
                    $image_id = get_post_thumbnail_id(get_the_ID());
                    CPAC\Images\the_img_fit_figure($image_id, 'list-grid__image', '(min-width: 650px) 50vw, 100vw', false); ?>
                <?php } ?>
            </a>
        </li>
    <?php endwhile; ?>
</ul>

上面的html/js代码显示了与 A 行相关的图像列表。

问题陈述：

我想从上面的html/js代码中实现的是我想用分隔符显示与B行和C行关联的图像列表。

B线图像

C线图像

标签： javascriptphphtmlwordpress

解决方案

推荐阅读