php - 更改图像 onclick - Javascript 按钮和 AJAX？

Question

我安装了一个 WordPress，其中有 2 个自定义字段，它们都存储图像(或者更确切地说是图像的 URL)。

然后我有一个 div，我想在其中显示图像。但我想显示第一个图像，然后有一些漂亮的按钮可以滚动到下一个图像。

到目前为止我的代码如下:

<div>
        <?php 
        $front_cover = get_post_meta($post->ID, 'front_cover', true);
        $back_cover = get_post_meta($post->ID, 'back_cover', true);
        $artwork = $front_cover;

        if ($back_cover === '') {
            echo '<img src="'.$artwork.'" />';
        } else {
            echo '<img src="'.$artwork.'" />';

        ?>
                    <div class="artwork_controls">
                        <a href="#" class="sliderBtnPrev">Previous</a>
                        <a href="#" class="sliderBtnNext">Next</a>
                        <span class="sliderPagination">1 of 3</span>
                    </div>

        </div> 
<?php } ?>

正如你所看到的。我的 If 语句检查 back_cover 是否有任何内容...如果没有，则仅显示 front_cover。 如果 back_cover 确实有内容，它应该显示封面，然后显示用户单击以加载封底的按钮。

我的想法是我可以获得“上一个”和“下一个”按钮来动态更改 $artwork 变量，但我不认为这是可能的，因为 PHP 已经被处理了？

这段代码可能是完全错误的，但希望你能明白我想要做什么？

Answer 1

<div>
    <?php $front_cover = get_post_meta($post->ID, 'front_cover', true); ?>
    <?php $back_cover = get_post_meta($post->ID, 'back_cover', true); ?>
    <?php $artwork = $front_cover; ?>

    <?php if ($back_cover === '') { ?>
        <img src="<?php echo $artwork; ?>" />
    <?php } else { ?>

        <img id="imgA" src="<?php echo $artwork; ?>" />
        <img id="imgB" src="<?php echo $back_cover; ?>" style="display:none;"/>
        <div class="artwork_controls">
            <span class="sliderBtnPrev" onClick="document.getElementById('imgA').style.display='none';document.getElementById('imgB').style.display='';">Show B</span>
            <span class="sliderBtnNext" onClick="document.getElementById('imgB').style.display='none';document.getElementById('imgA').style.display='';">Show A</span>
        </div>


    <?php } ?>
</div>