Как запустить событие тега <a>в javascript, который идет после текста «Пример» - PullRequest
Новая
       13

Как запустить событие тега <a>в javascript, который идет после текста «Пример»

0 голосов
/ 05 апреля 2019

Мне нужно запустить событие javascript, когда щелкают теги привязки после определенного текста.Моя страница содержит много тегов привязки, и мне нужно вызывать событие только тогда, когда щелкают теги привязки под текстом «example» без использования имени класса или идентификаторов.Возможно ли это?

Ответы [ 3 ]

2 голосов
/ 05 апреля 2019

Если вы можете добавить любую id или class к вашему примеру статьи, вы можете добавить прослушиватель событий для этого в JavaScript: 

<article>ABC</article>
<a></a>
<article class='exampleArticle'>Example</article>
<a></a>
<a></a>
<article>ABC</article>

<script>

 var ele = document.querySelector('.exampleArticle')
 // For first tag
 ele.nextElementSibling.addEventListener('click', function(ele) {
  //Do any thing here
 }
// For second tag
ele.nextElementSibling.nextElementSibling.addEventListener('click', function(ele) {
  //Do any thing here
 }



</script>
0 голосов
/ 05 апреля 2019

Ответ Вайбхава Кумара будет работать с данным примером, но обратите внимание, что в нем есть синтаксические ошибки, поскольку он не закрыл скобки в операторах addEventListener.Они должны быть: 

ele.nextElementSibling.addEventListener('click', function(ele) {
  //Do any thing here
});

Это также может стать очень грязным, если вы захотите добавить слушателя ко многим тегам HTML - скоро это будет выглядеть как ... 

ele.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.addEventListener('click', function(ele) {
  //Do any thing here
});

Чтобы настроить прослушиватель на запуск одной и той же функции для ряда тегов HTML, просто выделите класс для тегов, на которые вы хотите настроить таргетинг;для запуска отдельных функций используйте id или классы.Смотрите мой полный ответ с примером кода.

0 голосов
/ 05 апреля 2019

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

<article>ABC</article>
<a></a>
<article>Example</article>
<a id="fire-event1" href="#">Anchor1</a>
<a id="fire-event2" href="#">Anchor2</a>
<article>ABC</article>

<script>
  var fireEvent1 = document.getElementById("fire-event1");
  var fireEvent2 = document.getElementById("fire-event2");

  fireEvent1.addEventListener("click", myFunction1);
  fireEvent2.addEventListener("click", myFunction2);

  function myFunction1() {
    alert("Event 1 activated");
  }
  function myFunction2() {
    alert("Event 2 activated");
  }
</script>

или, если вы хотите, чтобы несколько якорей запускались с одной и той же функцией, выделите целевые якоря для класса, а затем циклически переключайтесь между ними, чтобы установить слушателя на каждого, например, 

<article>ABC</article>
<a></a>
<article>Example</article>
<a class="fire-event" href="#">Anchor1</a>
<a class="fire-event" href="#">Anchor2</a>
<article>ABC</article>

<script>
  var fireEvent = document.getElementsByClassName("fire-event");

  for (var i = 0; i < fireEvent.length; i++) {
    fireEvent[i].addEventListener('click', myFunction);
  }

  function myFunction() {
    alert("Event fired");
  }
</script>

JSFiddle

...