jquery JavaScript -确定点击的特定url

xsuvu9jc 于 2023-08-04 发布在 jQuery

关注(0)|答案(3)|浏览(94)

我有一个调查，其中有3个网址（见下面的HTML）内的问题。我们希望跟踪哪些特定的URL被点击，而不仅仅是一个URL被点击。我有这样的代码，其中嵌入了clicked=的数据

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>

型

jquery

来源：https://stackoverflow.com/questions/76773470/javascript-determining-specific-urls-clicked

3条答案

按热度按时间

5lwkijsr1#

每个链接的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）回复(0）举报 2023-08-04

oug3syen2#

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>

字符串

赞(0）回复(0）举报 2023-08-04

5lwkijsr3#

正如其他人提到的，不要重用id，而是使用class。
存储有关元素的数据的最简单方法是在该元素上创建一个属性。
在jQuery中，回调函数中的this引用元素本身，所以这里我们只给予this一个click_count的属性，然后每次点击链接时递增。

jQuery('.extLink').click(function(event) {
  event.preventDefault(); //just for this example, remove for production
  this.click_count = (this.click_count ?? 0) + 1;
  //Qualtrics.SurveyEngine.setEmbeddedData("clicked", this.click_count); //uncomment this for production
  jQuery(this).siblings('span').text(this.click_count); //remove this for production too
  jQuery('#NextButton').click();
});

个字符
尽管这种方法在这个场景中的挑战是客户端也可以访问元素属性，因此他们可以将click count更改为他们想要的任何内容，这将产生意想不到的后果。
由于我们使用的是jQuery，因此一个很好的解决方法是使用.data()方法。这允许我们将数据存储在元素中，好处是客户端无法访问它。

jQuery('.extLink').click(function(event) {
  event.preventDefault();  //just for this example, remove for production
  let $link = jQuery(this);
  
  $link.data('click_count', ($link.data('click_count') ?? 0) + 1);
  //Qualtrics.SurveyEngine.setEmbeddedData("clicked", this.click_count); //uncomment this for production
  jQuery(this).siblings('span').text($link.data('click_count')); //remove this for production too
  jQuery('#NextButton').click();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><a href="https://www.directrelief.org/" class="extLink" rel="noopener" target="_blank">Direct Relief</a> - <span>0</span> - Support for people affected by emergencies</div>
<div><a href="https://water.org/" class="extLink" rel="noopener" target="_blank">Water.org</a> - <span>0</span>  - Provision of safe and accesible water</div>
<div><a href="https://www.feedingamerica.org/" class="extLink" rel="noopener" target="_blank">Feeding America</a> - <span>0</span>  - Works on hunger relief</div>

的字符串

赞(0）回复(0）举报 2023-08-04

我来回答

jquery JavaScript -确定点击的特定url

3条答案

相关问题

热门标签

最新问答