javascript - 动态添加数据属性

Question

我的html是

<div id="ctup-ads-widget-2" class="caption slide-heading "  data-x="380" data-y="80" data-speed="1800" data-start="1200" data-easing="easeOutExpo">Hui</div>

我正在尝试动态更改 dat=x 和 data-y 的值

下面两个我都试过了，都没有用。

<script>
$('#ctup-ads-widget-2').click(function() {

    $(this).attr("data-x", "580");
});
</script>

和

<script>
$('#ctup-ads-widget-2').click(function() {
    $(this).data('x') = "580";
});
</script>

和

<script>
window.onload = function() {
    var anchors = document.getElementById('ctup-ads-widget-2');
    for (var i = 0; i < anchors.length; i++) {
        anchors[i].setAttribute('data-x', '580');
        anchors[i].setAttribute('data-y', '30');
    }
}
</script>

控制台截图

错误截图

Answer 1

你不能像这样使用它

$(this).data('x') = "580";//won't work

尝试使用 data()

 $(this).data("x","580"); //$(this).attr("data-x", "580") should also work

更新

将其包含在 $(document).ready..

$(document).ready(function(){
  $('#ctup-ads-widget-2').click(function() {
    $(this).data("x","580");
  });
})