将数据属性注入现有元素的问题

Question

您能否请一看这个演示，让我知道为什么我无法将点击的元素属性数据data-css注入color-box的数据属性？如你所见，我可以通过

在控制台中打印出来

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

但是

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

未设置目标元素.current-color

的数据属性

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试使用.attr('data-anything')代替.data('anything')它可以在这里使用

＆＃13;

＆＃13;

$(".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());
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

'data-'atrribute无法工作的原因是当你第一次使用$（'..'）。data（''）方法来设置它后的属性值 $（'''）。data（''，''）方法，jquery存储了这个值，这样当你再次点击时，该值没有改变。  我认为理由比开发商的解决方案更重要。我希望这会有所帮助。