如何根据单击的链接/过滤器将字符串添加到 onclick 函数？答案

【问题标题】：How can you add a string to an onclick function based on a link/filter clicked?如何根据单击的链接/过滤器将字符串添加到 onclick 函数？
【发布时间】：2014-08-23 05:59:33
【问题描述】：

想用jQuery或者js。

我有可以改变页面显示方式的过滤器。我正在跟踪使用锚标记上的 onclick 过滤的图像的点击次数。我想将选择的链接/过滤器与我当前在 onClick 中的文本一起传递。

我的过滤器和 trackLink 工作正常。我只需要将数据过滤器值附加到锚标记中的 onclick 即可。

以下是阐明情况的示例...

过滤器

<a href="#" data-filter=".optionone">Option One</a>
<a href="#" data-filter=".optiontwo">Option Two</a>

被过滤的内容 - 同一页面

<div class="item">
    <a onclick="trackLink('Text I Want', 'Text I want')" href="1.aspx">
        <img src="1.jpg" alt="1" />
        <div>Test</div>
    </a>
</div>  

<div class="item">
    <a onclick="trackLink('Text I Want', 'Text I want')" href="2.aspx">
        <img src="2.jpg" alt="2" />
        <div>Test</div>
    </a>
</div>

我想要什么 - 传递数据过滤器值。

<div class="item">
    <a onclick="trackLink('Text I Want', 'Text I want' + the filter name as it is being click passed)" href="1.aspx">
        <img src="1.jpg" alt="1" />
        <div>Test</div>
    </a>
</div>

【问题讨论】：

你需要更多的 javascript 来做任何事情。这只是 HTML。
正确 - 过滤器和 trackLink 功能正常工作，但如何将数据过滤器附加到它？
缺少很多信息...如果你想获取你的数据属性，你只需要做$(selector).attr("data-filter")
@pmrotule 你如何把它添加到
@RooksStrife 我把它作为答案

标签： javascript jquery html filtering adobe-analytics

【解决方案1】：

您不能真正在 HTML 元素内的函数内附加这样的文本。

我要做的是通过向过滤器添加一个类来切换 HTML，并将“我想要的文本”移动到它们自己的数据值：

<a href="#" class="filter" data-filter=".optionone">Option One</a>
<a href="#" class="filter" data-filter=".optiontwo">Option Two</a>
...
<div class="item"><a data-first-text="Text I Want" data-second-text="Text I want" href="1.aspx"><img src="1.jpg" alt="1" /><div>Test</div></a></div>

然后使用jQuery调用你的函数：

var filter_text;

$('a.filter').click(function(event) {
    // set the filter text to whatever the filter is
    filter_text = $(this).data('filter');
});

$('.item a').click(function(event) {
    var first_text = $(this).data('first-text');
    var second_text = $(this).data('second-text');

    // call trackLink with your desired texts
    trackLink(first_text, second_text + filter_text);
});

Fiddle

【讨论】：

那么我可以在 HTML 链接中添加 onclick="trackLink()" 或 trackLink(first_text, second_text + filter_text) 吗？这样，onclick 值就会传递给 Adobe Omniture（跟踪）。
有了这个你就不需要链接中的onclick功能了。 jQuery 为你调用它。

【解决方案2】：

在 JQuery 中，您可以使用如下所示的内容。 DEMO这里

$('a').click(function(){
alert($(this).attr('data-filter'));
});

【讨论】：

如何获取点击过滤器的值并将其添加到锚标记上，例如 -
使用此关键字，请查看DEMO

【解决方案3】：

我建议你这样做：

$(".item a").click(function () {
    var value = $(this).attr("data-filter"); // 'this' = the a element being clicked
    trackLink('text you want', 'text you want' + value);
});

最后从你的 onClick 中删除 trackLink 功能，即使是在 a 标签上

【讨论】：

【解决方案4】：

在文档的 HEAD 中包含 jQuery

<script src="http://code.jquery.com/jquery-latest.js"></script>

然后，要创建一个全局函数，你可以这样：

jQuery.noConflict();
jQuery(document).ready(function($){

    getDataFilter = function(selector){

        return $(selector).attr("data-filter");
    }

    anotherFunction = function(dataFilter){

        // do something
    }
});

您的标签将如下所示

onclick="anotherFunction(getDataFilter('.item a'));"

或者，如果您想要纯 JavaScript 解决方案：

document.querySelector('.item a').getAttribute("data-filter");

希望对你有帮助！

【讨论】：