gpt4 book ai didi

javascript - 单击一个按钮可执行三个或更多操作

转载 作者:行者123 更新时间:2023-12-03 00:42:39 26 4
gpt4 key购买 nike

简短版本:我需要一个按钮,单击三次后即可执行三个单独的操作。

长版:我的网站有一页,其中有一些带有插图的可读介绍。我有一个按钮,单击一次即可将第一张图像更改为第二张图像。当用户读完第二个图像后,单击同一按钮,然后使用多次单击功能导航到不同的 html 位置。

但是,我需要在简介中添加第三张图片。因此,我需要该按钮在第一次单击时将 image1 更改为 image2,在第二次单击时将 image2 更改为 image3,然后在第三次单击时导航到下一个 html 位置。

这可能吗?到目前为止,我见过的所有多点击解决方案仅涵盖两个事件。或者他们使用“onclick”,我被告知这是不好的做法。我可以修改已经必须添加第三个单击操作的代码(也许更改 Calledonetime 的值)吗?或者我的方向完全错误?

用于两个操作的工作 JS 代码:

<script>
jQuery(document).ready(function () {
$('#multiclick').click(function () {
multiclick();
});
});

var calledonetime = false;

function multiclick() {
if(calledonetime=== false) {
calledonetime = true;
var image = document.getElementById("infoscreentext");
image.src="infoscreentext2.png"; } /* action on first click */
else {
window.location.href = "castleview.html"; /* action on second click */
}
}
</script>

HTML:

<body>
<div id="wrapper" div class="toshow">
<img src="infoscreenarrows.jpg" alt="Title" />
<img src="infoscreentext.png" id="infoscreentext" alt="" />
</div>

<div id="enterbutton">
<input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
</div>
</body>

最佳答案

您可以使用开关:

var clickCount = 0;

function clickHandler () {
clickCount += 1;
switch (clickCount) {
case 1:
// do action #1
break;
case 2:
// do action #2
break;
case 3:
// do action #3
break;
}
}

或者您可以使用数组:

var clickCount = -1;
var actions = [];

function action1 (e) { /* prevent default, switch to image 1 */ }
function action2 (e) { /* prevent default, switch to image 2 */ }
function action3 () { /* follow hyperlink */ }

actions.push(action1);
actions.push(action2);
actions.push(action3);

function clickHandler (event) {
clickCount += 1;
actions[clickCount](event);
}

关于javascript - 单击一个按钮可执行三个或更多操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53379006/

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