Я использую CMS, которая не позволяет использовать множество параметров редактирования для меню, и вот как выглядит HTML:

<ul>
    <li>...</li>
    <li>...</li>
    <li><a href="http://example.org?utm_source=google">Go</a></li>
</ul>

Я хочу изменить тег a, добавив этот атрибут:

onclick="ga('send', 'event', { eventCategory: 'Download form', eventAction: 'Click'});"

Результат должен выглядеть так:

<ul>
    <li>...</li>
    <li>...</li>
    <li><a href="http://example.org?utm_source=google" onclick="ga('send', 'event', { eventCategory: 'Menu-Button', eventAction: 'Click'});">Go</a></li>
</ul>

Я не могу использовать getElementById, класс или имя, так как это не единственный тег a в списке. есть идеи?

1
Ioan Szabo Kovari 30 Дек 2015 в 20:17

3 ответа

Лучший ответ

ОБНОВЛЕНО:

это не единственный тег в списке

К сожалению, только что посмотрел это и исправил ответ, чтобы применить ко всем тегам a с таким атрибутом href

С необработанным javascript: JS Fiddle 1 - обновлено

var linkHTML = "<a href=\"http://example.org?utm_source=google\" onclick=\"ga('send', 'event', { eventCategory: 'Menu-Button', eventAction: 'Click'});\">Go</a>";
var links = document.querySelectorAll('li a[href="http://example.org?utm_source=google"]');

for (var i = 0; i < links.length; i++) {
  links[i].outerHTML = linkHTML;
}
<ul>
  <li>...</li>
  <li>...</li>
  <li><a href="http://example.org?utm_source=google">Go</a>
  </li>
  <li>...</li>
  <li><a href="http://example.org?utm_source=google">Go</a>
  </li>
</ul>

С помощью jQuery JS Fiddle 2 - обновлено

var linkHTML = "<a href=\"http://example.org?utm_source=google\" onclick=\"ga('send', 'event', { eventCategory: 'Menu-Button', eventAction: 'Click'});\">Go</a>";

$('li a[href="http://example.org?utm_source=google"]').each(function() {
  $(this).parent().html(linkHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
  <li>...</li>
  <li>...</li>
  <li><a href="http://example.org?utm_source=google">Go</a>
  </li>
  <li>...</li>
  <li><a href="http://example.org?utm_source=google">Go</a>
  </li>
</ul>

----------

Выход:

<li>
  <a href="http://example.org?utm_source=google" onclick="ga('send', 'event', { eventCategory: 'Menu-Button', eventAction: 'Click'});">Go</a>
</li>
0
Mi-Creativity 30 Дек 2015 в 17:59

См. скрипку

Поскольку тег привязки находится в последнем элементе ul, вы можете использовать селектор :last-child. См. JS ниже

$('ul li:last>a').attr('onclick',"ga('send', 'event', { eventCategory: 
  'Menu-Button', eventAction: 'Click'});");

Дополнительные сведения о селекторе last-child см. В документации.

И вот скриншот для справки

enter image description here

0
Lal 30 Дек 2015 в 17:37

Возможно ли, что вы можете использовать любой атрибут, присутствующий в тегах, для однозначной идентификации элементов? В качестве примера я могу однозначно найти ваш тег a с помощью href=http://example.org?utm_source=google с помощью приведенного ниже селектора a[href=http://example.org?utm_source=google].

Можно ли что-то подобное сделать в вашем случае?

Если вышеперечисленное работает и в коде можно использовать jQuery, мы можем просто связать событие с ним обычным способом, например:

$('a[href=http://example.org?utm_source=google]').click(function () {
    /*Your Code here*/
});
0
Mi-Creativity 30 Дек 2015 в 17:57