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 dyanamicaly的值

我在下面尝试了两个都不起作用。请帮助

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

consol screenshot

enter image description here

错误截图

enter image description here

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

Answer 2

如果需要在元素上动态添加data-attribute，

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

可以使用。

从查看截图中可以清楚地看到jQuery没有正确加载。使用<script>标记在</body>标记结束前加载jQuery文件。

示例：

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

动态添加数据属性

2 个答案: