如何定位 html 5 属性“data-src”并用 jQuery 替换为“src”？

Question

我正在尝试通过使用新的 html 5“data-”属性进行存储，然后在需要时将其删除，从而找到动态加载文件和其他元素的“最佳”方法。

我的问题：

如何定位“data-”属性并将其删除，从而留下剩余的属性名称？

例如，这个：

<!-- Custom CSS -->
<link rel="stylesheet" class="custom" data-href="css/mobile.css">

会变成这样：

<!-- Custom CSS -->
<link rel="stylesheet" class="custom" href="css/mobile.css">

编辑：整个实验都是针对响应式设计（UI/性能）的，我需要能够根据设备分辨率加载 css 文件/元素。这将为较小的设备带来更高的性能，以防止不必要的数据加载。我正在使用enquire.js plugin（btw），它允许您在针对媒体查询时触发函数。因此，为了保持最新状态，我想使用“data-”属性根据设备分辨率在 DOM 中添加/删除元素。

Christian Heilmann 的本教程就是这样做的： http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

我正在尝试将他的技术与 enquire.js 结合起来

Answer 1

假设您知道如何访问您的元素，启用是一个单行：

$(element).attr("href", $(element).data("href"));

因为data-href 什么都不做，所以你不需要删除它。只需将其镜像为真实的href 属性。要使无效，请再次使href 属性无效：

$(element).attr("href", false);

或完全删除它：

$(element).removeAttr("href");

对于<img> 也是同样的技巧，但使用字符串"src" 而不是"href"

Answer 2

虽然我同意值得质疑这是否是解决此问题的正确方法，但从技术角度来看，这是您访问、删除和添加元素属性的方式。

$('[data-attrName]').each(function() {
    var $el = $(this);
    var val = $el.attr('data-attrName');
    $el.removeAttr('data-attrName')
       .attr('attrName', val);
});

Answer 3

用attributename 替换所有data-attributename 属性可以简单地通过循环数据对象来完成。

$(element).each(function() {
    var 
        el = $(this),
        data = el.data();

        $.each(data,function(key,value) { el.attr(key,value); });
});

不过，我会指出其他人已经指出的内容 - 我认为您已经决定这是完成某事所需要做的事情，而这可能不是您应该做的事情。

试着问一个答案能解决你实际问题的问题，而不是问一个答案能解决你在尝试解决另一个问题时遇到的问题的问题....如果你最后一句没看懂。