选择一个图像时通过 Jquery 年份选择器和滑动滑块重定向到下一页的逻辑

Question

我是 javascript 的初学者。在一个页面中，我创建了滑块图像，并在下方放置了一个 Jquery 日期选择器（它选择年份）。场景：当我在滑块中选择一个图像并选择它必须重定向到下一页的年份时。提交按钮：<script type="text/javascript">let _img = document.getElementById("img");let _img1 = document.getElementById("img1");let _img2 = document.getElementById("img2");let _picker = document.getElementById("picker");let _btn = document.getElementById("button");let isImgClicked = false;let isDatePicked = false;_img.addEventListener("click", function(){  isImgClicked = true;});_img1.addEventListener("click", function(){  isImgClicked = true;});_img2.addEventListener("click", function(){  isImgClicked = true;});_picker.addEventListener("click", function(){  isDatePicked = true;});_btn.addEventListener("click", function(){              if(!isImgClicked || !isDatePicked)              {                  alert("select the Year and Click the car image");              }              else                  {                  if((isImgClicked == "img") && (isDatePicked == "2020"))                     {                        window.location.replace("sample.html");                     }                  else if((isImgClicked == "img") && (isDatePicked == "2019"))                     {                   window.location.replace("sample1.html");                     }                  else                      {                        if((isImgClicked == "img1") && (isDatePicked == "2019"))                  {                  window.location.replace("sample2.html");                  }              else if((isImgClicked == "img1") && (isDatePicked == "2020"))                  {                   window.location.replace("sample3.html");                  }              else                  {                  alert("!!!!")                  }                 }                 }        });</script>当我单击该图像时，此代码将重定向到下一页。但是当我选择年份和图像时我需要重定向，并且在点击提交时必须重定向到下一页。有人可以帮忙吗？

Answer 1

onclick="Redirect();"当您单击图像时，您的代码建议被调用。

这里可以做两件事，

1. 在Redirect函数中，检查日期是否被用户选择，如果没有，提示选择一个日期，一旦选择然后重定向。

2. 创建一个不同的submit按钮。单击imageanddate picker时，保持不同的布尔值，该布尔值将设置为 true。单击 时submit，检查两个布尔值是否为真，然后重定向，否则提示布尔值错误false

let _img = document.getElementById("img")

let _picker = document.getElementById("picker")

let _btn = document.getElementById("btn")

let isImgClicked = false

let isDatePicked = false

_img.addEventListener("click", () => {

  isImgClicked = true

})

_picker.addEventListener("click", () => {

  isDatePicked = true

})

_btn.addEventListener("click", () => {

  if (!isImgClicked)

    alert("Image Not clicked")

  else if (!isDatePicked)

    alert("Date not picked")

  else

    alert("All good! Need to reirect")

})

<img src="https://res.cloudinary.com/demo/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/lady.jpg" id="img">

<div id="picker">

  Dummy date picker

</div>

<button id="btn">

  Submit

</button>

上面是 vanilla javascript 中第二种方法的基本代码表示。