Javascript 动态添加数据属性_Javascript_Jquery_Html_Custom Data Attribute

Javascript 动态添加数据属性

javascript jquery html

Javascript 动态添加数据属性,javascript,jquery,html,custom-data-attribute,Javascript,Jquery,Html,Custom Data Attribute,我的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> Hui 我正在尝试动态更改dat=x和data-y的值我在下面两种方法都试过了，但都不起作用 <script> $('#ctup

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

Hui

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

我在下面两种方法都试过了，但都不起作用

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

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


$（'#ctup-ads-widget-2'）。单击（函数（）{
$（此）.attr（“数据-x”，“580”）；
});

及


$（'#ctup-ads-widget-2'）。单击（函数（）{
$（this.data（'x'）=“580”；
});

及


window.onload=函数（）{
var archors=document.getElementById（'ctup-ads-widget-2'）；
对于（var i=0；i


控制台截图

错误截图
你不能像这样使用它
$(this).data('x') = "580";//won't work

尝试使用data（）

更新
将其放入$（文档）中。准备就绪..

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

如果需要在元素上动态添加数据属性
$("this").attr("data-x", "5");

可以使用
从您的屏幕截图可以看出，jQuery没有正确加载。
使用
标记在
标记结束之前加载jQuery文件
示例：
<body>
...
..
<script src="js/jQuery.js"></script>
<script src="js/yourfile.js"></script>
</body>


...
..
$（this）.data（'x'）=“580”在语法上是错误的<代码>$（this.attr（“data-x”，“580”）应该可以工作。。。如果使用数据api访问值，则需要使用$（this）.data（“x”，“580”）引用此脚本可能在脚本执行时未加载DOM。使用jQuery document ready或window.onload函数$（'#ctup-ads-widget-2'）。单击（function（）{$（this）.data（“x”，“580”）；}）@Melvin屏幕截图很好，但您需要告诉我们您得到的错误是哪一行。@Melvin是否包含jQuery？包含在页脚中。。我已将脚本添加到页眉。。那是pblm吗？
$(document).ready(function(){
  $('#ctup-ads-widget-2').click(function() {
    $(this).data("x","580");
  });
})

$("this").attr("data-x", "5");

<body>
...
..
<script src="js/jQuery.js"></script>
<script src="js/yourfile.js"></script>
</body>