单击功能获取旧数据属性值 - JQuery答案

【问题标题】：Click function getting old data attribute value - JQuery单击功能获取旧数据属性值 - JQuery
【发布时间】：2017-04-12 10:03:56
【问题描述】：

我在 jQuery 中有一个标准的点击功能，

$( ".related-play" ).click(function() {
  $('#playlist .panel-collapse').removeClass('in');
  track_id = $('.related-play').data('id');
  $('#collapse-' + track_id).addClass("in");
  $('#collapse-' + track_id + " li").removeClass("active");
  $('#collapse-' + track_id + " .related").addClass("active");c
  console.log(track_id);
});

HTML

<div id="collapse-1156” class="panel-collapse collapse”>
    <ul class="nav nav-tabs inside-track-tabs">
           <li class=“active stems"><a data-toggle="tab" href="#stems-1156">Stems</a></li>
           <li class="related"><a data-toggle="tab" href="#related-1156">Related Tracks</a></li>
    </ul>
<div class="tab-content inside-track-content”>
    <div id=“stems-1156" class="tab-pane fade"></div>
    <div id="related-1156" class="tab-pane fade"></div>
</div>

<a class="related-play" data-id="1156">RELATED</a>

除了这个函数，我还有另一个函数可以根据页面中的其他事件改变 data-id 属性，通过使用这个 jQuery 行

trackID = 1567 (This is just an example but actually trackID is generated at random and could be any number of different IDs
)
jQuery(".related-play").attr("data-id", trackID);

由于某种原因，我单击了一次相关播放，并且第一次抓取它很好，但是当我再次单击它时，在数据属性更改后它抓取了旧值。我检查了 DOM，这个数据属性有一个更新的值，它得到了旧值。

我不明白它为什么会这样做

【问题讨论】：

能否请您包含您的html代码或创建一个有问题的sn-p。
也试试这个track_id = $(this).data('id');
更新了@CarstenLøvboAndersen，collapse div 是具有所有不同 track_id 的众多示例之一
如果没有你制作一个能准确地向我们展示问题的 sn-p，我担心我们可能很难为你提供帮助

标签： javascript jquery click

【解决方案1】：

在 jQuery 中，$(this) 用于引用当前对象

您需要使用this 提供当前参考对象，如下所示

$( ".related-play" ).click(function() {
  $('#playlist .panel-collapse').removeClass('in');
  track_id = $(this).data('id'); // Change applied
  $('#collapse-' + track_id).addClass("in");
  $('#collapse-' + track_id + " li").removeClass("active");
  $('#collapse-' + track_id + " .related").addClass("active");c
  console.log(track_id);
});

【讨论】：

@DIM3NSION - 使用 $(this) 获取当前对象数据 ID
谢谢！我已经把它改成了这个，但它只是抓取了不再存在于 DOM 中的旧数据属性值
@Mantas Čekanauskas 您的小提琴有效，因为您使用了两个具有相同数据属性的单独按钮。他正在使用另一个功能在单个按钮中设置属性。
@DIM3NSION 我刚刚遇到了同样的问题。我将 $(this).data('id') 更改为 $(this).attr('data-id') 并获得了最新值。不要问我为什么，但它奏效了！

【解决方案2】：

这对我来说非常有用。

 track_id = $(this).attr('data-id');

【讨论】：