Php 更改图像onclick-Javascript按钮&；AJAX

我有一个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 } ?>

第1页，共3页

如你所见。我的If语句检查封底是否有任何内容。。。如果没有，则仅显示前盖。 如果后盖有内容，则应显示前盖，然后显示用户单击以加载后盖的按钮

我的想法是，我可以使用'previous'和'next'按钮动态更改$artwork变量，但我不相信这是可能的，因为PHP已经被处理过了

---

这段代码可能是完全错误的，但希望您能看到我在尝试做什么？

一种方法是在单击“上一步”和“下一步”按钮时执行AJAX调用并获取图像。 但是，您可以将所有图像放在最终的html中，然后使用javascript和一些css完成其余的工作

如果你把这两个图像放在html中，假设它们有ID“front image”和“back image”，那么你就得到了这个

<img id="front-image" src="imgs/front-cover.jpg"/>
<img id="back-image" src="imgs/back-cover.jpg" style="visiblity: hidden"/>

那么你的钮扣会像这样

<a href="#" class="sliderBtnPrev" onclick="clickHandlerPrev">Previous</a>
<a href="#" class="sliderBtnNext" onclick="clickHandlerNext">Next</a>

虽然如果我没有弄错你的目标，我认为你的按钮最好简单地命名为“封面”和“封底”，因为你不是在大量图像上迭代，而是在这两个图像之间切换。

<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> 

" />
" />
“style=”显示：无；"/>
秀B
展示

if（A）{B}else{B；C}

可以干燥到

B；if（！A）C；

谢谢你的帮助！工作愉快！

<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>