Question

我使用的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标记。有什么想法吗？

Answer 1

您是否可以使用标签中的任何属性来唯一标识元素？举个例子，我可以通过以下选择器使用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*/
});

Answer 2

<强>更新：

这不是列表中唯一的标签

很抱歉，刚看到此内容并更正了应用于具有此类a属性的所有href代码的答案

使用原始javascript：JS Fiddle 1-updated

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

使用jQuery JS Fiddle 2-updated

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

----------

输出：

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

Answer 3

请参阅fiddle

由于锚标记位于ul的最后一个元素中，因此您可以使用:last-child选择器。见下面的JS

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

请参阅docs，详细了解last-child选择器。

并且，这是一个准备参考的屏幕截图

如何使用jQuery编辑标记

3 个答案:

----------

请参阅fiddle