Блог

Главная - Вопросы по программированию - JavaScript: функция onclick для изменения других элементов onclick

JavaScript: функция onclick для изменения других элементов onclick

#javascript #html #function #onclick

Вопрос:

Предполагаемая Функциональность

Я ищу что-то, что работает так:

  1. Пользователь нажимает на img
  2. функция handclick вызывается и «включает» родительский якорь img
  3. При повторном нажатии якорь перенаправит пользователя на новую страницу

Моя Проблема:

Приведенное ниже «включает» ссылку, но также действует так, как если бы ссылка была нажата одновременно.

Есть ли какой-либо способ исправить эту функциональность?

HTML-код:

 <a href="@Url.Action("Index/"   @card.ID)" onclick="return false;" class="link">
    <img src="~/Resources/@card.Image" id="@card.ID" onclick="handClick(@((int)card.Value), @card.ID)" class="card" />
</a>

Код JavaScript

 function handClick(cardValue, cardID) {
    *... irrelevant code ...*
    var playedCard = document.getElementById(cardID);
    *... irrelevant code ...*
    playedCard.parentElement.onclick = function () { return true };
}

Ответ №1:

Поскольку я не знаю, что такое нерелевантный код, я остановлюсь только на проблеме включения первого клика.

Мой подход включает href в себя атрибут. без этого ссылка не работает. Итак, я изменил имя атрибута на что-то другое и при нажатии заменил его фактическим атрибутом, таким образом «активировав» ссылку.

Обратите внимание, что курсор превращается в указатель после первого щелчка.

 document.querySelectorAll('a[hrefx]').forEach(function(el) {
  el.addEventListener('click', function() {
    // This condition enable re-using the listener for other purposes.
    if (this.getAttribute('hrefx')) { 
      this.setAttribute('href', this.getAttribute('hrefx'));
      this.removeAttribute('hrefx');
    }
  });
}); 
 <a hrefx="#">
    <img src="https://picsum.photos/200">
</a>
<a hrefx="#">
    <img src="https://picsum.photos/200">
</a>
Метки: