在选择一个图像时，通过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>

代码：

<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. 在Redirect函数中，检查用户是否选择了日期，如果没有，则提示选择日期，一旦选择，则重定向
2. 创建不同的submit按钮。单击image和date picker时，保持不同的布尔值，该值将设置为true。单击submit时，检查两个布尔值是否都为true，然后重定向，否则将提示为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中第二种方法的基本代码表示。