向現有元素注入數據屬性的問題

Question

您能否看一下這個演示，讓我知道為什么我無法將單擊的元素屬性數據data-css注入到color-box data屬性color-box ？ 如您所見，我可以通過以下方式在控制台中將其打印出來

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

但是

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

沒有為目標元素.current-color設置data屬性

 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> 

Answer 2

之所以無法使用“ data-”屬性，是因為當您第一次使用$（'..'）。data（''）方法獲取由$（'..'）設置的屬性值后，該屬性就無法使用。 data（''，''）方法，jQuery存儲該值，以便再次單擊時該值未更改。
我認為對於開發人員來說，原因比解決方案更重要。我希望這可以有所幫助。