javascript - 将数据属性注入(inject)现有元素的问题

Question

您能否看一下这个演示，并让我知道为什么我无法将点击的元素属性数据 data-css 注入(inject) color-box 的数据属性>？正如你所看到的，我可以通过以下方式在控制台中打印出来:

console.log(jQuery(this).data('css'));

但是

jQuery('.current-color').data('css', jQuery(this).data('css'));

未设置目标元素的数据属性.current-color

jQuery(".color").on('click', function() {
  jQuery('.current-color').css('background', jQuery(this).data('color'));
  jQuery('.current-color').data('css', jQuery(this).data('css'));
  console.log(jQuery(this).data('css'));
  jQuery('.current-color-name').text(jQuery(this).find('.color-name').text());
});

.color-box {
    width: 100px;
    height: 100px;
    cursor: pointer;
    background:#eee;
    border:2px solid #444;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="current-color" data-css="">
  <div class="color-box current-color-name">Orane</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>

Answer 1

尝试使用 .attr('data-anything') 而不是 .data('anything') 它在这里有效

$(".color").on('click', function() {
  $('.current-color').css('background', $(this).attr('data-color'));
  $('.current-color').attr('data-css', $(this).attr('data-css'));
  console.log($(this).attr('data-css'));
  $('.current-color-name').text($(this).find('.color-name').text());
});

.color-box {
    width: 100px;;
    height: 100px;
    cursor: pointer;
    background:#eee;
    border:2px solid #444;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="current-color" data-css="">
  <div class="color-box current-color-name"></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 class="color-box color" data-css="orange.css" data-color="orange">
    <div class="color-name">Orange</div>
  </div>
  <div class="color-box color" data-css="blue.css" data-color="blue">
    <div class="color-name">Blue</div>
  </div>
</div>