Javascript 单击一个按钮可执行三个或更多操作_Javascript_Jquery_Html_Button

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

javascript jquery html button

Javascript 单击一个按钮可执行三个或更多操作,javascript,jquery,html,button,Javascript,Jquery,Html,Button,短版本：我需要一个按钮来执行三个单独的行动时，点击三次长版：我有一页我的网站，里面有一些可读的介绍和插图。我有一个按钮，当单击一次时，它会将第一个图像更改为第二个图像。当用户阅读完第二幅图像后，单击相同的按钮，然后使用multiclick函数导航到不同的html位置但是，我需要在介绍中添加第三个图像。因此，我需要按钮在第一次单击时将image1更改为image2，在第二次单击时将image2更改为image3，然后在第三次单击时导航到下一个html位置这可能吗？到目前为止，我看到的所有mu

短版本：我需要一个按钮来执行三个单独的行动时，点击三次

长版：我有一页我的网站，里面有一些可读的介绍和插图。我有一个按钮，当单击一次时，它会将第一个图像更改为第二个图像。当用户阅读完第二幅图像后，单击相同的按钮，然后使用multiclick函数导航到不同的html位置

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

这可能吗？到目前为止，我看到的所有multiclick解决方案只涉及两个事件。或者他们使用“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>


jQuery（文档）.ready（函数（）{
$（'#multiclick'）。单击（函数（）{
多点击（）；
});
});
var calledonetime=false；
函数multiclick（）{
if（calledonetime===false）{
calledonetime=true；
var image=document.getElementById（“infoscreentext”）；
image.src=“infoscreentext2.png”；}/*第一次单击时的操作*/
否则{
window.location.href=“castleview.html”/*第二次单击时的操作*/
}
}

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>

我要说的是，使用css html和js进行三次不同的点击


jQuery（文档）.ready（函数（）{
$（'#multiclick'）。单击（函数（）{
多点击（）；
});
});
var image1=document.getElementById（“infoscreentext”）；
var image2=document.getElementById（“infoscreentext2”）；
var image3=document.getElementById（“infoscreentext3”）；
image1&&image1.addEventListener（'单击'，（）=>{
image1.classList.add（'hide'）；
image2.classList.remove（'hide'）；
});
image2&&image2.addEventListener（'单击'，（）=>{
image2.classList.add（'hide'）；
image3.classList.remove（'hide'）；
});
image3&&image3.addEventListener（'单击'，（）=>{
window.location.href=“castleview.html”；
});

.hide{
显示：无；
}

是的，这是可能的，而且非常简单，但为什么要使用布尔值呢？我建议使用

整数

，因此让我们开始：-

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


jQuery（文档）.ready（函数（）{
$（'#multiclick'）。单击（函数（）{
多点击（）；
});
});
var clickedCount=0；
函数multiclick（）{
点击计数++；
如果（clickedCount==1）{
var image=document.getElementById（“infoscreentext”）；
image.src=“infoscreentext2.png”/*第一次单击即可更改图像*/
var calledonetime[1]；
}/*将1个计数添加到calledonetime*/
否则如果（clickedCount==2）{
var image=document.getElementById（“inforscreentext2”）；
image.src=“infoscreentext3.png”}/*第二次单击时更改图像*/
否则{
window.location.href=“castleview.html”/*第三次单击时的操作*/
}
}

您可以使用

开关

：

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);
}

你就不能数一数点击次数吗<代码>如果（计数===1）.