Question

简短版：单击3次后，我需要一个按钮来执行三个单独的操作。

长版：我的网站只有一页，上面有一些可读的插图介绍。我有一个按钮，单击一次即可将第一张图像更改为第二张图像。当用户阅读完第二张图像后，单击同一按钮，然后使用multiclick函数导航到其他html位置。

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

这可能吗？到目前为止，我所看到的所有multiclick解决方案都只涉及两个事件。或者他们使用“ onclick”，我被告知这是一种不好的做法。我可以修改已经必须添加第三次点击操作的代码（也许更改callonetime的值）吗？还是我走错了方向？

两个步骤的有效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>

Answer 1

您可以使用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);
}

Answer 2

我想说用CSS html和js通过以下三种不同的点击操作来完成

<table>
    ....
    <tr>
        <th class="width2">check</th>
        <td>
            <select>
                <option value="">- Select -</option>
                <option value="1" selected="">One</option>
                <option value="2">two</option>
            </select>
        </td>
        ...
    </tr>
    ...
</table>

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

Answer 3

是的，这是可能的，而且如此简单，但是为什么要使用布尔值呢？我建议为此使用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>

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

3 个答案: