根据单选按钮 output 更改图像 output

Question

再会，

我正在研究我的这个项目，但不幸的是我还不够熟练，无法解决我一直试图解决一段时间的以下问题。 我有一个网页，显示某人需要消耗多少卡路里才能达到他们的训练目标。 基于 3 个选项无线电输入选择，我想根据他们所做的选择在 output 页面上显示 3 个不同的图像。 这可以是减肥、维持或增肌。

代码如下：

目标输入代码：

<!-- Goal -->

                <div class="row px-md-5 mrow" id="rowtwo">

                    <div class="col-12 py-5">
                        <div class="text-center">
                            <h2 class="text-primary">2. Wat is je doel?</h2>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        
                        

                            <ul class="row radio-group-goal d-flex flex-stretch p-0 m-0">
                                <li class="radio col-md-6 selected d-flex flex-stretch mb-2" data-goal="Afvallen / Lager vetpercentage" style="list-style: none;">
                                    
                                    <div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100 greenborder">
                                        <h6 class="text-left"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-weight text-primary mr-2"></i> Afvallen / Lager vetpercentage</h6>
                                        <!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">minder kcal/koolhydraten</p> -->
                                    </div>
                                </li>

                                <li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Gezonde levensstijl" style="list-style: none;">
                                    
                                    <div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
                                        <h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-carrot text-primary mr-2"></i> Gezonde levensstijl</h6>
                                        <!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">Gezond</p> -->
                                    </div>
                                </li>

                                <li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Aankomen / Meer spiermassa" style="list-style: none;">
                                    
                                    <div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
                                        <h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-dumbbell text-primary mr-2"></i> Aankomen / Meer spiermassa</h6>
                                        <!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">muscle</p> -->
                                    </div>
                                </li>
                            </ul>
                        </div>

output 的代码：

<div class="col-12 col-md-6">
                <div class="row">
                    <div class="col-12 col-md-6 mb-4 d-flex flex-stretch">
                        <div class="youchoose-box px-4 py-5 d-flex align-items-center justify-content-center flex-column bg-white rounded shadow-sm w-100" style="border:1px solid white;">
                            <i class="fas fa-trophy text-center text-primary mb-2"></i>
                            <!-- <p class="mb-0 text-center">Doel</p> -->
                            <h5 class="text-primary text-center">
                                <?php echo $_POST['radio-value'];?>     
                            </h5>
                        </div>
                    </div>

//The image I want to change based on the radio value:

<div class="container pb-5">
                    <div class="row">
                        <div class="col-12 d-flex align-items-center justify-content-center">

                            <div class="d-flex align-items-center justify-content-center rounded shadow-sm">
                                <img src="<?php echo home_url();?>/wp-content/uploads/2020/12/Macro-split.png">
                            </div>
                            </div>
                    </div>
                </div>


<!-- save values and send to next pages -->
<input type="hidden" id="radio-value" name="radio-value" value="<?php echo $_POST['radio-value']?>" />

我希望你能指导我正确的方向，因为我现在了解 Javascript 的基础知识。

先感谢您！

Answer 1

假设您的值在$_POST['radio-value']中通过，执行此操作的基本方法是使用if语句检查是否设置了 3 个值之一，然后设置该值对应的图像：

//The image I want to change based on the radio value:
<?php

$image = 'default.png';
if (isset($_POST['radio-value'])) {
   if ($_POST['radio-value'] == 'value for image 1') {
       $image = 'value1image.png';
   } else if ($_POST['radio-value'] == 'value for image 2') {
       $image = 'value2image.png';
   } else if ($_POST['radio-value'] == 'value for image 3') {
       $image = 'value3image.png';
   }
}
?>

然后在您的图像 src 中：

<img src="<?php echo home_url();?>/wp-content/uploads/2020/12/<?php echo $image;?>">