Question

我在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>

单独使用此函数我还有另一个函数，通过使用此jQuery行来改变基于页面中其他事件的data-id属性

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，这个数据属性有一个更新的值，它得到旧值。

我无法理解为什么会这样做

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

Answer 2

对我来说这很正常。

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

单击函数获取旧数据属性值 - JQuery

2 个答案: