我有一项调查,问题中有 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>
每个链接的 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();
});
});
页面上每个元素的 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>