Question

我正在开发一个wordpress主题的挑战，但我认为我所追求的只是一般的php / JS解决方案，没有任何Wordpress特定的。

所以我在下面的代码中提取了我上传的图像数组的缩略图和描述。我想要做的是当用户点击链接时，与该图像相关联的描述和标题显示在页面上其他位置的div中。

我的问题是到目前为止，我能想到的唯一方法是在我的php foreach语句中设置一个javascript变量，但问题是每次都会覆盖变量值（因为我可以' t更改变量名称）所以在它结束时我没有为每个图像提供不同的JS变量，我只有一个包含数组中最后一个图像的详细信息。

我知道AJAX可能是一种前进的方式，但我对此几乎一无所知。如果有人能帮我指出正确的方向，我真的很感激。

由于

<?php 
        $gallery_images = get_custom_field('galleryImages:to_array');
        foreach ($gallery_images as $galleryID) {
            $description = $attachment->post_content;                               //get image description
            $caption = $attachment->post_excerpt;                                   //get image caption
            ?>
                <a href="[JS/AJAX to load this items description and caption into target div]">link</a>
            <?php
        }


?>

<div id="targetDiv"></div>

Answer 1

我认为你个人而言，这是错误的。使用AJAX与WordPress网站进行交互对于显示图像的一些外围信息的简单能力来说似乎有些过分。

我要做的是让WordPress在最初下载页面时吐出图像以及标题信息，但隐藏字幕信息，然后使用客户端JavaScript在需要时显示/隐藏它。

<?php

    $button_html = "";
    $caption_html = "";

    $gallery_images = get_custom_field('galleryImages:to_array');

    $gallery_images_count = 0;

    foreach ($gallery_images as $galleryID) {

        $description = $attachment->post_content; //get image description
        $caption = $attachment->post_excerpt; //get image caption

        $button_html .= '<div id="caption-button-' . $gallery_images_count . '" class="show-caption-button">Show Caption</div>';

        $caption_html .= '<div id="caption-' . $gallery_images_count . '" style="display:none;">' . $caption . '</div>';

        $gallery_images_count++;

    }

    echo '<div id="buttonDiv">' . $button_html . '</div>';
    echo '<div id="targetDiv">' . $caption_html . '</div>';

?>

然后是JavaScript / jQuery：

$('.show-caption-button').click(function(){

    var caption_id = $(this).prop('id').substring(15);

    $('#caption-'+caption_id).eq(0).toggle();

});

如果没有自己设置WordPress很难测试，但基本上我们正在做的是在PHP中循环使用带有编号id的字幕div到字符串变量。然后，在循环结束时，我们将其回显到页面。

在JavaScript / jQuery中，我们抓取标题按钮的相应ID，并使用它在页面中进一步切换相关标题。

动态获取一些数据并将其插入div（与wordpress相关）

1 个答案: