jquery JavaScript -确定点击的特定url

xsuvu9jc  于 2023-08-04  发布在  jQuery
关注(0)|答案(3)|浏览(93)

我有一个调查,其中有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>

5lwkijsr

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();
  });
});

字符串

oug3syen

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>

字符串

5lwkijsr

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>

的字符串

相关问题