0

我对正在开发的 wordpress 主题有挑战，但我认为我所追求的实际上只是一个通用的 php/JS 解决方案，没有特定于 Wordpress 的解决方案。

所以我有下面的代码，其中包含我上传的一组图像的缩略图和描述。我想做的是当用户单击链接时，与该图像关联的描述和标题显示在页面其他位置的 div 中。

我的问题是，到目前为止，我能想到的唯一方法是在我的 php foreach 语句中设置一个 javascript 变量，但问题是每次都会覆盖变量值（因为我无法更改变量名）所以最后我没有为每个图像设置不同的 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>
4

1 回答 1

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 就很难进行测试，但本质上我们正在做的是将带有编号 id 的标题 div 添加到 PHP 中的字符串变量中，因为我们正在遍历我们的图像。然后，在循环结束时，我们将其回显到页面。

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

于 2013-07-27T07:55:09.907 回答