为何jQuery属性选择器无法匹配通过data()设置的data-peer属性元素

• jQuery的.data()方法与原生DOM的data-*属性是两套独立的存储体系：.data()在首次读取时会将DOM上data-*的初始值缓存到jQuery内部的存储对象中，后续通过.data('key', value)写入值时，只会更新jQuery内部的缓存，不会同步修改DOM节点上实际的data-*属性。
• 代码中使用的[data-peer="xxx"]是浏览器原生的属性选择器，只会匹配DOM节点上真实存在的属性值，完全感知不到jQuery内部缓存的data值，因此会出现已经用.data()赋值但选择器找不到元素的问题。
• 使用attr('data-peer', 远端用户ID)能解决问题的原因是，attr()方法直接操作DOM节点的原生属性，修改后的值会真实写入DOM结构，自然可以被属性选择器匹配到。

如果不想修改原有data()赋值的逻辑，也可以通过jQuery的filter方法筛选匹配内部data值的元素，无需依赖DOM属性选择器：

function stop_chat(remote_user_id){
  let player = $('#their-video').filter(function(){
    return $(this).data('peer') === remote_user_id
  })
  // 后续停止流逻辑
}

注意：不要混用data()和attr()操作同一个data-*属性，很容易出现内部缓存和DOM属性值不一致的问题，操作时建议统一使用其中一套方案。

内容的提问来源于stack exchange，提问作者hretic