javascript 使用jQuery从HTML中删除数据属性

k5hmc34c  于 2023-05-16  发布在  Java
关注(0)|答案(5)|浏览(166)

这个好像不管用
我有一个页面,隐藏某些链接。当DOM被加载时,我使用jQuery来切换其中的一些元素。这是通过使用数据属性来驱动的,如下所示:

<div class="d_btn" data-usr='48'>
  <div class="hidden_button">

然后,我有代码:

$.each($(".d_btn"), function() {
     var btn = $(this).data('usr');
   if ( btn == '48' ){      
     $(this).children('.hidden_button').toggle();
   }

以上一切按计划进行。问题是,我试图在计算if语句后从class. d_btn中删除data-usr。我尝试了以下方法,但没有任何效果(即,在页面加载后,源代码仍然显示data-usr属性:

$(this).removeAttr("data-usr");

$(this).removeData("usr");

我已经研究了几个小时了...什么都没有!非常感谢帮助!

    • 更新**

我已经尝试了将data属性设置为空字符串的好建议,但我仍然没有得到想要的结果。
为了进一步解释,我试图删除该属性的原因是,当ajax响应向页面添加另一个项目时,先前添加的项目已经显示或隐藏了按钮。在AJAX响应时,一旦DOM被加载,我将调用相同的函数。
目前,当通过AJAX添加内容时,它会切换所有按钮(显示隐藏的按钮,反之亦然。)呃...
我也完全愿意尝试我的方法的替代品。谢谢!

更新

好吧,灯泡刚刚闪了一下,我可以通过使用. show()而不是. toggle()来做我想做的事情
无论如何,我仍然想找到这个问题的答案,因为每当添加内容时,页面将可能检查数百个项目-这似乎非常低效(即使是计算机,哈哈哈)。

rbl8hiat

rbl8hiat1#

如果removeAttr不起作用,为什么不将值设置为随机值或空变量。

$(this).attr("data-usr" , '');

$(this).prop("data-usr" , '');
zc0qhyus

zc0qhyus2#

更改DOM不会影响源代码。它会影响DOM,您可以使用Inspector/Developer Tools查看DOM。右击=>查看源代码会给予你页面的原始源代码,而不是被JavaScript修改过的当前源代码。

lyfkaqu1

lyfkaqu13#

将其设置为空字符串:

$(this).attr("data-usr", "");

我同意Kolink所说的:检查DOM,而不是源代码。(Chrome:Ctrl + Shift + i)。

vsdwdz23

vsdwdz234#

正如其他人所说。检查来源只会显示网页的原始未经编辑的来源。您需要做的是使用开发人员工具检查DOM。
我刚刚在Chrome的检查器中检查了jsfiddle here上的所有内容,属性和数据肯定都被删除了。

vi4fp9gy

vi4fp9gy5#

(i.e.,页面加载后,源仍然显示data-usr属性:
源代码将始终显示页面上最初加载的内容,而不是DOM元素的当前状态。如果您在控制台中检查该页,您应该会看到该属性消失。
我使用并测试过,

$button.removeAttr("data-usr");

并且它如预期的那样工作。对DOM的检查显示data-usr不再是一个属性。

相关问题