Javascript - 确定点击的特定网址

问题描述 投票:0回答:2

我有一项调查,问题中有 3 个 URL(请参阅下面的 HTML)。我们想要跟踪哪些特定的 URL 被点击,而不仅仅是一个 URL 被点击。我有这个代码,其中嵌入了 clicked=0

的数据
Qualtrics.SurveyEngine.addOnload(function() {
  jQuery('#extLink').click(function(event) {
    Qualtrics.SurveyEngine.setEmbeddedData("clicked", "1");
    jQuery("#NextButton").click();
  });
});

但是我想不出一个好的方法来修改它以便能够知道单击的具体 URL,因为 jQuery 是 #extLink 并且实际上此代码仅计算是否单击了某些内容,而不是具体单击了什么。

有什么建议吗?

HTML 代码适用于调查问题中的每个选项。

<div><a href="https://www.directrelief.org/" id="extLink" rel="noopener" target="_blank">Direct Relief</a> - Support for people affected by emergencies</div>

<div><a href="https://water.org/" id="extLink" rel="noopener" target="_blank">Water.org</a> - Provision of safe and accesible water</div>

<div><a href="https://www.feedingamerica.org/" id="extLink" rel="noopener" target="_blank">Feeding America</a> - Works on hunger relief</div>
javascript jquery qualtrics
2个回答
0
投票

每个链接的 id 应该是唯一的(例如 extLink1、extLink2、extLink3)。 id 在 html 页面上应该始终是唯一的。

然后,您不必为每个链接执行单独的事件处理程序,而是可以将 class='extLink' 添加到所有链接。然后:

Qualtrics.SurveyEngine.addOnload(function() {
  jQuery('.extLink').click(function(event) {
    Qualtrics.SurveyEngine.setEmbeddedData(this.id+"_clicked", "1");
    jQuery("#NextButton").click();
  });
});

0
投票

页面上每个元素的 id 都必须是唯一的,要将元素一起设置样式或使用 javascript 获取一组元素,请使用类。

这段代码可以解决您的问题:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div><a href="https://www.directrelief.org/" class="extLink" id="extLink1" rel="noopener" target="_blank">Direct
            Relief</a> -
        Support for people affected by emergencies</div>

    <div><a href="https://water.org/" class="extLink" id="extLink2" rel="noopener" target="_blank">Water.org</a> -
        Provision of safe and
        accesible water</div>

    <div><a href="https://www.feedingamerica.org/" class="extLink" id="extLink3" rel="noopener" target="_blank">Feeding
            America</a> -
        Works on hunger relief</div>

    <script src="jquery.min.js"></script>
    <script>
        $('.extLink').on('click', (e) => {
            console.log($(e.target).attr("id"))
        })
    </script>
</body>

</html>
© www.soinside.com 2019 - 2024. All rights reserved.