Одна кнопка для трех или более действий при нажатии - PullRequest
Новая
       2

Одна кнопка для трех или более действий при нажатии

0 голосов
/ 19 ноября 2018

Короткая версия: мне нужна кнопка для выполнения трех отдельных действий при трехкратном нажатии.

Длинная версия: у меня есть одна страница моего сайта, где есть небольшое читаемое введение с иллюстрациями. У меня есть кнопка, которая меняет первое изображение на второе при нажатии один раз. Когда пользователь закончит чтение второго изображения, нажав эту же кнопку, затем перейдет в другое место HTML, используя функцию мультипликации.

Однако мне нужно добавить третье изображение во вступление. Поэтому мне нужна кнопка, чтобы изменить изображение 1 на изображение 2 при первом щелчке, изменить изображение 2 на изображение 3 при втором щелчке, а затем перейти к следующему местоположению HTML при третьем щелчке.

Возможно ли это? Все мультикликовые решения, которые я видел до сих пор, охватывают только два события. Или они используют «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>

Ответы [ 3 ]

0 голосов
/ 19 ноября 2018

Да, это возможно и так просто, но почему вы используете для этого логическое значение? Я предлагаю использовать 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>
0 голосов
/ 19 ноября 2018

Вы можете использовать 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);
}
0 голосов
/ 19 ноября 2018

Я бы сказал, сделайте это тремя различными кликами, как показано ниже, с помощью CSS CSS и 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...