简短版本：当点击三次时，我需要一个按钮来执行三个单独的操作。
长版：我有一页我的网站，其中有一个小可读的介绍和插图。我有一个按钮，点击一次就可以将第一个图像更改为第二个图像。当用户阅读完第二张图像后，单击相同的按钮，然后使用多点功能导航到不同的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>
您可以使用switch:
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;
}
}
或者您可以使用Array:
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);
}
我想说的是，用css html和js 点击三次不同的按钮，如下所示
<script>
jQuery(document).ready(function () {
$('#multiclick').click(function () {
multiclick();
});
});
var image1 = document.getElementById("infoscreentext");
var image2 = document.getElementById("infoscreentext2");
var image3 = document.getElementById("infoscreentext3");
image1 && image1.addEventListener('click', () => {
image1.classList.add('hide');
image2.classList.remove('hide');
});
image2 && image2.addEventListener('click', () => {
image2.classList.add('hide');
image3.classList.remove('hide');
});
image3 && image3.addEventListener('click', () => {
window.location.href = "castleview.html";
});
</script>.hide {
display: none;
}<body>
<div id="wrapper" div class="toshow">
<img src="infoscreenarrows.jpg" alt="Title" />
<img src="infoscreentext.png" class="" id="infoscreentext" alt="" />
<img src="infoscreentext2.png" class="hide" id="infoscreentext2" alt="" />
<img src="infoscreentext3.png" class="hide" id="infoscreentext3" alt="" />
</div>
<div id="enterbutton">
<input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
</div>
</body>是的，这是可能的，而且很容易，但为什么要使用布尔值呢？我建议使用Integer，所以让我们开始：-
<script>
jQuery(document).ready(function () {
$('#multiclick').click(function () {
multiclick();
});
});
var clickedCount = 0;
function multiclick() {
clickedCount++;
if(clickedCount == 1) {
var image = document.getElementById("infoscreentext");
image.src="infoscreentext2.png"; /* change image on first click */
var calledonetime[1];
} /* add 1 count to calledonetime */
else if(clickedCount == 2) {
var image = document.getElementById("inforscreentext2");
image.src="infoscreentext3.png"; } /* change image on second click */
else {
window.location.href = "castleview.html"; /* action on third click */
}
}
</script>