Блог

Главная - Вопросы по программированию - Как я могу добиться события щелчка в JavaScript?

Как я могу добиться события щелчка в JavaScript?

#javascript #html

#javascript #HTML

Вопрос:

Я выбираю элемент span на странице. Для первого щелчка я хочу, чтобы он ссылался на другую страницу. При втором щелчке я хочу, чтобы он вернулся на исходную страницу.

Например, у меня есть ссылка с example.com , которая является оригиналом. При нажатии на этот элемент «abcd» я хочу, чтобы он ссылался example.com/ar , а при повторном нажатии я хочу, чтобы он возвращался example.com .

 document.querySelector('span.arb').addEventListener('click', function() {
  a.href="example.com";
})

Как мне выполнить это, используя вышеизложенное?

Комментарии:

1. измените в href соответствии с тем, что есть в данный момент …. кстати, что есть a в вашем коде?

2. Итак, есть два элемента? Кликабельный span и целевой a ? Кроме того, при третьем щелчке он должен вернуться к example.com/ar , в основном, переключению, или это все равно будет example.com ?

3. document.querySelector('span.arb').addEventListener('click', function() { a.href= a.href === "example.com/ar" ? "example.com" : "example.com/ar"; });

4. может быть, вы можете проверить URL с помощью window. найдите и отфильтруйте свой URL, чтобы перейти

Ответ №1:

вы можете получить ссылку и изменить ее после щелчка

 document.querySelector('span.arb').addEventListener('click', toogle)

function toogle(){
if( document.querySelector('span.arb').href === "domain.com"){
document.querySelector('span.arb').href = "domain.com/link"
} else if (document.querySelector('span.arb').href === "domain.com/link"){
document.querySelector('span.arb').href = "domain.com"
}

Ответ №2:

Удерживайте ссылку в атрибуте данных и используйте ее для переключения.

 document.querySelector("[data-toggleHref]").addEventListener("click", function(){
  //Get the link element
  var a = document.querySelector("a");
  var current =  a;
  //Log to demontrate only
  console.log(this.dataset.togglehref);
  //Update the link
  a.href = this.dataset.togglehref;
  //Set the data attribute for toggle
  this.dataset.togglehref = current;
});  
 <a href="/pagea.html" id="target">Link</a>
<span data-toggleHref="/pageb.html">Click Me</span>

Ответ №3:

попробуйте этот код:

 document.querySelector('span.arb').addEventListener('click', function() {
  if(a.href == "example.com") {
     a.href="example.com/ar"; 
  } else {
     a.href="example.com"; 
  }
})

или более короткий ответ с использованием троичного оператора:

 document.querySelector('span.arb').addEventListener('click', function() {
  a.href = a.href == "example.com" ? "example.com/ar" : "example.com";
})

Ответ №4:

Попробуйте это:

 let count = 0;
document.querySelector('span.arb').addEventListener('click', function () {
  count  ;
 document.querySelector('a').href = "http://example.com";
  if (count == 1) {
    document.querySelector('a').href = "http://example.com/ar";
  } else {
     document.querySelector('a').href = "http://example.com";
  }
});  
 <a href="http://example.com">Link</a>
<span class="arb">Click Me</span>