为何无法将点击元素的data-css属性注入到.current-color元素？

你遇到的问题核心在于jQuery的.data()方法的工作机制：

• 当你用.data('key', value)时，jQuery并没有直接修改DOM元素上的data-key属性，而是把这个值存在了jQuery内部的缓存对象里。所以你在浏览器开发者工具的HTML面板里看不到data-css属性的变化，但实际上这个值已经被存储起来了——你可以试试在点击后执行console.log(jQuery('.current-color').data('css'))，能正常输出对应的值。

• 如果想要同时更新DOM元素上的data-css属性（让它在HTML里可见），你需要使用.attr()方法来直接操作DOM属性。

修改后的代码 #

把设置data属性的那行代码换成.attr()即可：

jQuery(".color").on('click', function() {
  const $this = jQuery(this); // 缓存当前元素，提升性能
  jQuery('.current-color')
    .css('background', $this.data('color'))
    .attr('data-css', $this.data('css')); // 这里改用attr()修改DOM属性
  console.log($this.data('css'));
  jQuery('.current-color-name').text($this.find('.color-name').text());
});

完整可运行示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.color-box {
  width: 100px;
  height: 100px;
  cursor: pointer;
  background:#eee;
  border:2px solid #444;
  margin: 10px 0;
}
</style>
<div class="current-color" data-css="">
  <div class="color-box current-color-name">Orange</div>
</div>
<div class="colors">
  <div class="color-box color" data-css="red.css" data-color="#f44336">
    <div class="color-name">red</div>
  </div>
</div>
<script>
jQuery(".color").on('click', function() {
  const $this = jQuery(this);
  jQuery('.current-color')
    .css('background', $this.data('color'))
    .attr('data-css', $this.data('css'));
  console.log($this.data('css'));
  jQuery('.current-color-name').text($this.find('.color-name').text());
});
</script>

现在点击红色色块后，你可以在开发者工具里看到.current-color元素的data-css属性已经变成red.css了，同时依然可以用.data('css')获取到这个值。

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