Question

功能

根据用户在上一页中选择的选项，创建一个显示图片的网络应用。

因此，功能流程如下：

用户选择“是”或“否”问题：所选择的选项将影响显示的最终图像
用户选择“是”或“否”回答后，会将它们带到公共页面第二选择页面“0”，“1”，“2”，“3”，“ 4" ， “5”
因此，根据用户基于2个问题做出的选择，将显示不同的会员图像。因此，最终图像将显示为：

图像A - ＆gt;如果用户选择“否”和“0”

图像B - ＆gt;如果用户选择“是”和“1”到“5”

图像C - ＆gt;如果用户选择“是”和“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条件如下

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

根据条件设置显示图像

1 个答案: