动态分配数据角色属性

Dynamically assigning data-role attributes

本文关键字：属性 角色 数据 动态分配      更新时间：2023-09-26

我想我可以在调用jQuery Mobile的JavaScript之前添加这个:

$('section').data('role','page');
$('article').data('role','content');

这样我就可以在我的HTML中简单地使用<section>和<article>标签，而不是指定<div data-role="page">和<div data-role="content">。

但我认为它不起作用

你可以这样做:

$('section').attr('data-role','page');
$('article').attr('data-role','content');

试试这个:

: 

<script src="jquery.js"></script>
<script src="YOUR-SCRIPT.js"></script>
<script src="jquery-mobile.js"></script>


$(document).bind("mobileinit", function(){
    $('section').data('role','page');
    $('article').data('role','content');
    /* OR */
    $('section').attr('data-role','page');
    $('article').attr('data-role','content');
});

参考:http://jquerymobile.com/demos/1.2.1/docs/api/globalconfig.html

为什么需要"data-"属性?http://api.jquery.com/data/它们可能导致内存泄漏以及其他问题。jQuery已经有一个内置的"数据"，它正在工作。它不设置数据属性，它使用了一种更好、更有效的方法来用JavaScript存储与DOM选择器相关的数据。

如果你因为某些原因没有内置'data'，你应该更新jQuery。这是一个衬垫，主要是为了让你看看它是如何工作的。它不是一个完整的组合，它只是一种非常简单的方法，使用数据键的元素的选择器来存储数据。当元素被删除时，我没有删除数据，所以我的实现可能会导致内存泄漏。这只是一个例子。

if ($(window).data === undefined) {
    $.fn.data = (function () {
        var storage = {};
        return function data (name, val) {
            var id = $(this).selector;
            storage[id] = storage[id] || {};   
            if (val === void 0) {
                return storage[id][name];
            }
            storage[id][name] = val;
            return $(this);
        }
    }());
}
var foo = $('section').data('role','page');
var bar = $('article').data('role','content');
foo.text(foo.data('role'));
bar.text(bar.data('role'));
http://jsfiddle.net/dETuh/1/

注意警报没有运行，所以我的shim甚至没有被使用。

if ($(window).data === undefined) {
    $.fn.data = (function () {
        var storage = {};
        return function data (name, val) {
            var id = $(this).selector;
            storage[id] = storage[id] || {};   
            if (val === void 0) {
                return storage[id][name];
            }
            storage[id][name] = val;
            return $(this);
        }
    }());
}
var foo = $('section').data('role','page');
var bar = $('article').data('role','content');
foo.text(foo.data('role'));
bar.text(bar.data('role'));
相关文章：