javascript - 让foreach在javascript循环中一一显示？

Question

我尝试在 javascript 循环中使用 foreach 显示页面中多个类别的最新帖子，但 foreach 却一一显示它们，如下图所示:

我想在每个元素中显示它，而不是在每个元素中显示全部。

for (var i in books) { //Start JS Code
    var html = '<div class="row"><div class="book_history">';
        // JS Output

    <?php // Start PHP
    $catids = array(39, 37, 2); // Category for test
    foreach ( $catids as $catid ) {

        $my_query = new WP_Query( array(
        'cat' => $catid,
        'ignore_sticky_posts' => 1,
        'posts_per_page' => 1,
        'no_found_rows' => true ) 
        );

        if ( $my_query->have_posts() ) :

                while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
                    html += '<a href="<?php the_permalink(); ?>">»Chapter <?php the_title(); ?></a></div>'; // Javascript Code, Displaying the result of foreach with js
            <?php endwhile;

        endif;

        wp_reset_postdata();
    } ?> // End PHP

        $bookcontainer.append(html); // Insert all result of foreach and js into some element

} // End JS Code

有什么解决办法吗？ *类别的顺序与JavaScript相同。

Answer 1

由于 PHP 是在服务器端呈现的，因此您无法以这种方式将其与 JavaScript 结合起来。

但是您可以将 JSON 传递给 JavaScript 来解析结构并将其显示在网站上。

想象一下您的数据有以下数组:

$data = array(
    array(
        'category_id' => 39,
        'chapters' => array(
            array(
                'link' => 'http://google.de',
                'chapter_name' => 'First chapter',
            )
        ),
    ),
    array(
        'category_id' => 37,
        'chapters' => array(
            array(
                'link' => 'http://google.de',
                'chapter_name' => 'Second chapter',
            )
        ),
    ),
    array(
        'category_id' => 42,
        'chapters' => array(
            array(
                'link' => 'http://google.de',
                'chapter_name' => 'Third chapter',
            )
        ),
    ),
);

您可以使用 json_encode($data) 简单地输出此数组的 JSON 表示形式(确保将其回显到 JS 变量中)。

然后你就可以用 JavaScript 轻松地读出它了。这是一个很好的代码笔:https://codepen.io/YannickFricke/pen/Vqzoob

有关 forEach 函数的快速说明:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach