如何获取我最后一次点击的 data-url答案

【问题标题】：how can get data-url for the last of my click如何获取我最后一次点击的 data-url
【发布时间】：2022-11-07 19:41:53
【问题描述】：

我有三个a 标签，带有data-url 和类data-click。我点击了很多次。

当我点击#log 时，我希望console.log 显示我最后一次点击的data-url，而不是我点击的所有data-url

$('.data-click').on('click', function() {
  var btn = $(this);
  var dataUrl = btn.attr('data-url');
  document.getElementById('log').addEventListener('click', function() {
    console.log(dataUrl)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<a data-url="1" href="#!" class="data-click">aaa</a>
<a data-url="2" href="#!" class="data-click">aaa</a>
<a data-url="3" href="#!" class="data-click">aaa</a>

<a href="#!" id="log">log</a>

【问题讨论】：

你为什么要添加一个新的单击您的#log 元素的处理程序，每次单击其中一个.data-click 链接时...？

标签： javascript html

【解决方案1】：

嵌套事件处理程序通常是要避免的。在这种情况下，它会反复向#log 添加一个新的点击句柄，这就是您看到的原因全部以前的值输出到控制台。

要执行您需要的操作，您可以在 .data-click 元素上放置一个类，将其从先前单击的元素中删除。然后在#log 点击处理程序中，您可以选择.active 元素并从中读取data-url。

let $a = $('.data-click').on('click', function() {
  $a.removeClass('active');  
  $(this).addClass('active');
});

$('#log').on('click', () => {
  const url = $('.data-click.active').data('url');
  console.log(url);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<a data-url="1" href="#!" class="data-click">aaa</a>
<a data-url="2" href="#!" class="data-click">aaa</a>
<a data-url="3" href="#!" class="data-click">aaa</a>

<a href="#!" id="log">log</a>

【讨论】：