3

我正在尝试通过使用新的 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/performance），我需要能够根据设备分辨率加载 css 文件/元素。这将为较小的设备带来更高的性能，以防止不必要的数据加载。我正在使用enquire.js 插件（令人惊叹的顺便说一句），它允许您在针对媒体查询时触发函数。因此，为了保持最新状态，我想使用“data-”属性根据设备分辨率从 DOM 中添加/删除元素。

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

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

4

3 回答 3

4

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

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

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

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

或完全删除它：

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

因为<img>这是相同的技巧，但使用字符串"src"而不是"href"

于 2013-10-16T23:46:25.187 回答
3

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

$('[data-attrName]').each(function() {
    var $el = $(this);
    var val = $el.attr('data-attrName');
    $el.removeAttr('data-attrName')
       .attr('attrName', val);
});
于 2013-10-16T23:35:12.390 回答
1

只需循环遍历数据对象即可完成替换所有data-attributename属性。attributename

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

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

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

尝试问一个问题的答案将解决您的实际问题，而不是问一个问题的答案将解决您在使用它来尝试解决另一个问题时遇到的问题....如果您不这样做，我会理解明白最后一句话。

于 2013-10-16T23:57:09.043 回答