Все страницы ссылки на сайте, чтобы открыть окно чата

Question

У меня есть клиент, которому нужны ссылки на все его страницы на домашнем веб-сайте html, т. Е. При нажатии на любое меню, домашнюю страницу, все, чтобы открыть окно поддержки чата. Обычный href должен быть похож на этот пример, чтобы сделать это, но на домашней странице есть несколько десятков ссылок, и он не хочет удалять каждую ссылку вручную, а только делать это с одним кодом, таким образом, он может просто удалить ее в любое время.

<a href="javascript:jivo_api.open();">Open the chat</a>

Пример ссылки Мне нужно открыть чат при нажатии на него:

<li class="list-link"> <a href="tyres/index.html"> <i class="tyres ico"></i> anvelope <i class="wlf wlf-arrow-right arrow-link"></i> </a> </li>

Answer 1

Обычный href должен быть таким же, как этот пример

Код, который вы показываете, не использует нормальные href s. Он использует методы, которым более 25 лет и которые мы обрабатывали кликами до того, как разработали стандарты API или были заинтересованы в доступности.

Во-первых, не используйте гиперссылки исключительно как перехватчики событий JavaScript. Любой видимый элемент на веб-странице поддерживает событие click, но гиперссылки обозначают навигацию. У тех, кто полагается на вспомогательные технологии, такие как программы чтения с экрана, могут возникнуть проблемы при навигации по сайту, когда вы используете гиперссылки, но не для навигации. Вместо этого просто используйте другой встроенный элемент (например, span) и укажите, что ваш обработчик событий click.

Во-вторых, javascript:.... не понадобится, потому что вы будете делать свой JavaScript отдельно от вашегоHTML (он же «Разделение интересов»).

Теперь к вашему вопросу. Если вы просто дадите любые / все элементы, которые должны открывать окно чата при щелчке по общему классу CSS, вы можете создать очень простой код, который найдет их все, зациклит их и назначит им один и тот же обработчик событий, который будетоткройте чат. Вот пример:

// Get all the elements that have the "chat" class and put into an array
let chatElements = Array.prototype.slice.call(document.querySelectorAll(".chat"));

// Loop over the array
chatElements.forEach(function(item){
  // Assign an event handler
  item.addEventListener("click", function(){
    console.log("open chat window here");
  });
});

.chat { cursor:pointer; color:blue; }

<p class="chat">I will open the chat</p>
<p>I won't open the chat</p>
<div>I will <span class="chat">open the chat</span></div>
<h1 class="chat">I will open the chat</h1>
<h5>I won't open the chat</h5>

Answer 2

$(function(){
     $('a').click(function(event) {
          event.preventDefault();   
         jivo_api.open();
     });
});