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

Can't seem to get this one to work...

看来这个不能用了……

I have a page that hides certain links. When the DOM is loaded, I'm using jQuery to toggle some of those elements. This is driven by using a data attribute like so:

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

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

Then, I have the code:

然后，我有代码:

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

The above all works as planned. The problem is that I am trying to remove the data-usr from the class .d_btn once the if statement is evaluated. I've tried the following and nothing works (i.e., after the page is loaded, the source still shows the data-usr attribute:

最重要的是一切按计划进行。问题是，在计算if语句之后，我试图从.d_btn类中删除数据。我试过以下方法，但没有成功。，加载页面后，源仍然显示data-usr属性:

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

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

I've been working on this for a couple of hours now and...nothing! Help is greatly appreciated!

我已经做了几个小时了，什么都没做!非常感谢您的帮助!

UPDATE

更新

I've tried the great suggestions of setting the data attribute to an empty string but I'm still not getting the desired result.

我尝试过将数据属性设置为空字符串的伟大建议，但仍然没有得到期望的结果。

To explain a little further, The reason I'm trying to remove the attribute is so when an ajax response adds another item to the page, the previously added items would already have the button either shown or hidden. Upon AJAX response, I'm calling the same function once the DOM is loaded.

进一步解释一下，我试图删除属性的原因是，当ajax响应向页面添加另一个项时，先前添加的项已经显示或隐藏了按钮。在AJAX响应中，我在加载DOM之后调用相同的函数。

Currently, when something is added via AJAX, it toggles all the buttons (showing the ones that were hidden and vice versa.) Ugh...

目前，当通过AJAX添加某些内容时，它将切换所有按钮(显示隐藏的按钮，反之亦然)。啊…

I'm also fully willing to try alternatives to my approach. Thanks!

我也完全愿意尝试替代我的方法。谢谢!

UPDATE

更新

Well, the light bulb just flashed and I am able to do what I want to do by just using .show() instead of .toggle()

灯泡刚闪过我可以用。show()而不是。toggle()

Anyway, I'd still like to find an answer to this question because the page will be potentially checking hundreds of items whenever something is added - this seems horribly inefficient (even for a computer, hahaha.)

无论如何，我还是想找到这个问题的答案，因为无论什么时候添加什么东西，页面都会检查数百个条目——这似乎非常低效(即使对一台电脑来说，哈哈哈)。

4 个解决方案

#1

Changing the DOM doesn't affect the source. It affects the DOM, which you can view with the Inspector/Developer Tools. Right click => View Source will give you the original source of the page, not the actual current source as modified by JavaScript.

更改DOM不会影响源。它影响到DOM，您可以使用Inspector/Developer工具查看DOM。右键单击=>视图源将提供页面的原始源，而不是JavaScript修改后的实际当前源。

#2

Why don't you set the value to a random value or empty variable instead if removeAttr does not work..

如果removeAttr不起作用，为什么不将值设置为一个随机值或空变量呢?

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

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

#3

Set it to a blank string:

设置为空字符串:

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

I second what Kolink said: check the DOM, not the source. (Chrome: Ctrl + Shift + i).

我支持Kolink所说的:检查DOM，而不是源。(Chrome: Ctrl + Shift + i)。

#4

As others have stated. Checking the source will only show the original unedited source for the webpage. What you need to do is check the DOM using developer tools.

正如别人所说。检查源文件将只显示未编辑的原始源文件。您需要做的是使用开发人员工具检查DOM。

I've just checked everything in Chrome's inspector on jsfiddle here and the attribute is definitely being removed as well as the data.

我刚刚在jsfiddle的Chrome检查器中检查了所有的内容，属性和数据都被删除了。

#1