顯示基於情況的圖像設置

Question

功能：

創建Web應用程序，將顯示一個圖像取決於選項選擇該用戶已在前面的頁面中選擇。

因此，功能流程如下：

1. 用戶選擇「是」或「否」的問題：所選擇的選擇會影響所示

2. 最終圖像用戶具有選後如果答案爲「是」或「否」，則會將它們帶到共同頁面「0」，「1」，「2」，「3」，「4」，「5」的第二選擇頁面

3. 因此，根據用戶根據2個問題所做的選擇，將顯示不同的聯盟圖片。因此，將被顯示的結束圖像：

圖片A - >如果用戶已選擇 「否」 和 「0」

圖像B - >如果用戶已選擇 「YES」 和「1 「至 」5「

圖像C - >如果用戶已選擇 」YES「 和 」0「

問題：

我目前正在迷失如何進行或者甚至如何開始。因此，我會虛心請求一些幫助。謝謝。

代碼：

function loadQns2() { 
 

 
    $('#H_FirstQ').fadeOut(); 
 

 
    $('#H_SecondQ').fadeIn(); 
 
} 
 

 
//Green-Screen 
 
function loadPhotobooth(flag) { 
 
    $('#H_SecondQ').fadeOut(); 
 

 

 
    //method where the final image will be displayed 
 
    if ($('#H_FirstQ') = YES && $('#H_SecondQ') = 0) { 
 
    ....(show image) 
 
    } else if ($('#H_FirstQ') = YES && $('#H_SecondQ') = 1 - 5) {..(show image).. 
 
    } else if ($('#H_FirstQ') = NO && $('#H_SecondQ') = 0) {..(show image).. 
 
    } 
 
}

<div id="H_FirstQ" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=2; top:0px; left:0px; display: none;"> 
 

 
    <!--Video Div--> 
 
    <div id="First_Question_Video" style="position:absolute;"></div> 
 

 
    <img src="lib/img/yes.png" class="Answer_button_animate" style="width:650px; height:200px; top:600px; left:290px; position: absolute; z-index: 0; " onclick="loadQns2()" /> 
 

 
    <img src="lib/img/no.png" class="Answer_button_animate" style="width:650px; height:180px; top:615px; left:970px; position: absolute; z-index: 0; " onclick="loadQns2()" /> 
 
</div> 
 

 
<div id="H_SecondQ" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=3; top:0px; left:0px; display: none;"> 
 

 
    <!--Video Div--> 
 
    <div id="Second_Question_Video" style="position:absolute;"></div> 
 

 
    <img src="lib/img/qns2_1.png" class="Answer_button_animate" style="width:200px; height:350px; top:500px; left:274px; position: absolute; z-index: 0; " onclick="loadPhotobooth('1')" /> 
 
    <img src="lib/img/qns2_2.png" class="Answer_button_animate" style="width:200px; height:350px; top:500px; left:474px; position: absolute; z-index: 0; " onclick="loadPhotobooth('2')" /> 
 
    <img src="lib/img/qns2_3.png" class="Answer_button_animate" style="width:200px; height:350px; top:500px; left:674px; position: absolute; z-index: 0; " onclick="loadPhotobooth('3')" /> 
 
    <img src="lib/img/qns2_4.png" class="Answer_button_animate" style="width:200px; height:350px; top:500px; left:874px; position: absolute; z-index: 0; " onclick="loadPhotobooth('4')" /> 
 
    <img src="lib/img/qns2_5.png" class="Answer_button_animate" style="width:200px; height:350px; top:500px; left:1074px; position: absolute; z-index: 0; " onclick="loadPhotobooth('5')" /> 
 
    <img src="lib/img/qns2_0.png" class="Answer_button_animate" style="width:400px; height:350px; top:500px;left:1274px; position: absolute; z-index: 0; " onclick="loadPhotobooth('0')" /> 
 
</div> 
 

 

 
<!--FINAL 3 IMAGES THAT WILL BE SHOWN BASE ON CHOICE MADE BY USER --> 
 
<div id="NonDriverMsg" class="menu" style="display:none; position:absolute; z-index:7; top:0px; height: 1080px; width:1920px; left:0px;"> 
 
    <img id="ans1_non-driver" src="img/ans1_non-driver.png" style="width:1920; height:1080; top:0; left:0; position: absolute; z-index: 0; visibility:hidden;" /> 
 
</div> 
 

 
<div id="NonDrinkDriverMsg" class="menu" style="display:none; position:absolute; z-index:7; top:0px; height: 1080px; width:1920px; left:0px;"> 
 
    <img id="ans1_driver" src="img/ans1_driver.png" style="width:1920; height:1080; top:0; left:0; position: absolute; z-index: 0; visibility:hidden;" /> 
 
</div> 
 

 
<div id="DrinkDriverMsg" class="menu" style="display:none; position:absolute; z-index:7; top:0px; height: 1080px; width:1920px; left:0px;"> 
 
    <img id="ans2" src="img/ans2.png" style="width:1920; height:1080; top:0; left:0; position: absolute; z-index: 0; visibility:hidden;" /> 
 
</div>

Answer 1

首先糾正你的，如果條件如下

if ($('#H_FirstQ') = YES && $('#H_SecondQ') = 0) { 
    ....(show image) 
    } else if ($('#H_FirstQ') = YES && $('#H_SecondQ') = 1 - 5) {..(show image).. 
    } else if ($('#H_FirstQ') = NO && $('#H_SecondQ') = 0) {..(show image).. 
    } 

使用這個代替：

if ($('#H_FirstQ').val() == YES && $('#H_SecondQ').val() == 0) { 
    ....(show image) 
}