时间戳

首页 > 解决方案 > 想要解析主页上轮播的模态#

javascript - 想要解析主页上轮播的模态#

问题描述

主页上有一个轮播，我想在其中添加一个onclick event以将数据发送回GA. 轮播的每个部分都是一个链接。但我想指定他们选择的轮播上的哪个选项。当我将鼠标悬停在每个轮播链接上时，URL 的末尾会显示

#carousel-modal1, #carousel-modal2, #carousel-modal3, #carousel-modal4, #carousel-modal5.

如何以编程方式获取所选模式的数量？

我想添加一个onclick带有函数的事件。当我尝试时，我将其添加onclick到下面的其余代码中。我知道如何将信息发回，GA但我想最重要的问题是如何得到它modal #?

HTML：

<div class="carousel-item">
    <a 
        id="modal-111" 
        href="#carousel-modal" 
        onclick="myFunction()" 
        role="button" 
        data-toggle="modal">
        <img class="d-block w-100" alt="" src="/somepic.png" />
    </a>
</div>

标签： javascriptgoogle-analytics

解决方案

你的问题有点到处都是，但似乎普遍的想法是你想111通过事件从例子中得到onclick......

为此，您可以使用this，它提供了对激活点击的元素的访问。然后你可以使用一些 js 字符串魔术来获取数字，如下所示：

function myFunction(){
    var id = this.id;
    var number = id.substring(id.indexOf('-')+1,id.length);
}

作为旁注，您可能需要考虑使用jQuery，它使这样的事情变得更容易：

<div class="carousel-item">
    <a 
        id="modal-111" 
        href="#carousel-modal" 
        role="button" 
        data-toggle="modal">
        <img class="d-block w-100" alt="" src="/somepic.png" />
    </a>
</div>

<!-- include the jQuery code on your site -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    $( document ).ready(function() {
        $('.carousel-item a').click(function(){
            var id = this.id;
            var number = id.substring(id.indexOf('-')+1,id.length);
        });
    });
</script>

在此示例中，您将一个函数附加到carousel-item标签内的所有锚链接，因此您不需要为每个锚链接添加一个 onclick。

根据您在评论中的更新，您似乎想要href属性后面的数字。以下是如何做到这一点：

function myFunction(){
    var href = this.getAttribute( 'href' );
    var number = href.substring( href.indexOf('modal')+1, href.length );
}

根据您的要求，看看这个答案是如何变化的。你真正想要的是两个小问题的答案：

  1. 如何获取属性的值。
  2. 如何在该值内搜索，或如何搜索字符串。

这两个问题用谷歌很容易回答。

当您构建更高级的东西时，SO 社区不会花时间解读您的问题。

下一次，一定要花很多时间把你的问题简化为最基本的问题。确保它尽可能容易理解。还要确保在 jsfiddle 或 codepen 上创建代码的工作示例（或尽可能接近）。

你应该至少花一个小时写一个问题。如果您接受此建议，99% 的时间您会在需要将问题发布到此处之前回答您自己的问题，这将为您节省大量时间。祝你好运。

推荐阅读