选择一个图像时通过 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();"当您单击图像时，您的代码建议被调用。这里可以做两件事，在Redirect函数中，检查日期是否被用户选择，如果没有，提示选择一个日期，一旦选择然后重定向。创建一个不同的submit按钮。单击imageanddate picker时，保持不同的布尔值，该布尔值将设置为 true。单击 时submit，检查两个布尔值是否为真，然后重定向，否则提示布尔值错误falselet _img = document.getElementById("img")let _picker = document.getElementById("picker")let _btn = document.getElementById("btn")let isImgClicked = falselet isDatePicked = false_img.addEventListener("click", () => {&nbsp; isImgClicked = true})_picker.addEventListener("click", () => {&nbsp; isDatePicked = true})_btn.addEventListener("click", () => {&nbsp; if (!isImgClicked)&nbsp; &nbsp; alert("Image Not clicked")&nbsp; else if (!isDatePicked)&nbsp; &nbsp; alert("Date not picked")&nbsp; else&nbsp; &nbsp; 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">&nbsp; Dummy date picker</div><button id="btn">&nbsp; Submit</button>上面是 vanilla javascript 中第二种方法的基本代码表示。