gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 21:23:55 24 4
gpt4 key购买 nike

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

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

最佳答案

您的代码建议在单击图像时调用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 中第二种方法的基本代码表示。

关于javascript - 选择一个图像时通过 Jquery 年份选择器和滑动 slider 重定向到下一页的逻辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60785868/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com