Question

主页上有一个轮播，我想在其中添加一个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>

Answer 1

您的问题到处都是，但是似乎流行的想法是您希望通过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 );
}

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

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

使用Google可以轻松回答这两个问题。

当您构建更高级的内容时，SO社区不会花时间来解释您的问题。

下次，请确保花费大量时间将您的问题简化为基本要点。确保它尽可能容易理解。另外，请确保在jsfiddle或codepen上创建一个工作示例（或尽可能接近的示例）。

您应该打算花至少一个小时写一个问题。如果您采纳此建议，则在99％的时间里，您需要先回答自己的问题，然后再在此处发布，这样可以节省大量时间。祝你好运。

想要解析主页上的轮播的模式＃

1 个答案: