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

Question

我是 JavaScript 初学者。在一个页面中，我创建了 slider 图像，并在下面放置了一个 Jquery 日期选择器(它选择年份)。

场景: 当我在 slider 中选择一个图像并选择年份时，它必须重定向到下一页。

提交按钮:

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

代码:

<script>
  function Redirect()
  {
      window.location="sample.jsp"
  }
  </script>

<div class="swiper-slide" style="background-image:url(./img/Eco.png)" onclick="Redirect();" id="eco"><b>Eco</b></div>

Jpicker 年份:

<script>
  $(function() {
        $('#datepicker').datepicker({
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'yy',
            onClose: function(dateText, inst) { 
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, 1));
            }
        });

       $("#datepicker").focus(function () {
            $(".ui-datepicker-month").hide();
            $(".ui-datepicker-calendar").hide();
        });

    });
  </script>

html:<p align="center"><b>Year:</b> <input type="text" id="datepicker"></p>

当我单击该图像时，此代码会重定向到下一页。但当我选择年份和图像时，我需要重定向，并且在单击提交时必须重定向到下一页。 有人可以帮忙吗？

Answer 1

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

这里可以做两件事，

1. 在重定向功能中，检查用户是否选择了日期，如果没有，则提示选择日期，选择后重定向。
2. 创建一个不同的提交按钮。单击图像和日期选择器时，维护不同的 bool 值，该 bool 值将设置为 true。单击submit时，检查两个 bool 值是否都为true，然后重定向，否则提示 bool 值错误，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>

上面是普通 JavaScript 中第二种方法的基本代码表示。