Разобрать конфигурацию $ .extend из атрибута данных

Question

Я знаю, что могу использовать $ .data, но как мне перебрать все атрибуты data- и объединить значения с конфигурацией плагина по умолчанию?

(function($){

  $.fn.plugin = function(opts){  

    opts = $.extend({
      foo: 'abc',
      boo: 45
    }, opts);

    return this.each(function(){        
          ...
    });

  };
})(jQuery);

Так что, если я использую

$('.el').plugin();

он должен искать атрибуты данных в .el, например data-foo и т. Д. *

Answer 1

В вашем цикле each() вы можете объединить объект, возвращенный data () , с вашими значениями по умолчанию, а затем объединить аргумент opts с результатом в одном вызове $.extend () :

$.fn.plugin = function(opts) {
    return this.each(function() {        
        var thisOpts = $.extend({
            foo: "abc",
            boo: 45
        }, $(this).data(), opts);
        // Now use 'thisOpts' as operating parameters for this element...
    });
};

Это должно обеспечить то, что вы хотите: аргумент opts имеет наивысший приоритет, за ним следуют атрибуты data- текущего элемента, за которыми следуют значения по умолчанию для плагина..

Answer 2

Вы можете получить все атрибуты для элемента, как это:

//get the element and setup an array for output
var el  = document.getElementById("o"),
    arr = [];

//loop through each attribute for the element
for (var i = 0, attrs = el.attributes, l=attrs.length; i < l; i++){

    //if the current attribute starts with `data-` then add it to the array
    if (attrs.item(i).nodeName.substr(0, 5) == 'data-') {
        arr.push(attrs.item(i).nodeName);
    }
}

Вот демоверсия: http://jsfiddle.net/ksbD3/1/

Также я получил большую часть приведенного выше кода из этого ответа: Получить все атрибуты из элемента HTML с помощью Javascript / jQuery

Answer 3

Метод .data () поддерживает атрибуты данных.

Начиная с jQuery 1.4.3 атрибуты данных HTML 5 будут автоматически втянул в объект данных jQuery. Обработка атрибутов с встроенные тире были изменены в JQuery 1.6, чтобы соответствовать W3C HTML5 спецификация.

Вызов его без указания параметра вернет объект с парами ключ / значение для всех атрибутов данных:

var mydata = $("#mydiv").data();

Answer 4

Вы можете использовать метод data() для объекта jQuery, который выдаст все атрибуты данных в виде пары ключ / значение. Попробуйте это.

(function($){

  $.fn.plugin = function(opts){  

    //this.data() will give { foo: 'abc', boo: 45 ... }
    opts = $.extend(this.data(), opts);

    return this.each(function(){        
          ...
    });

  };
})(jQuery);

.data() ссылка: http://api.jquery.com/data/

Answer 5

Спасибо за все ответы, которые указывают с использованием opts = $ .extend (this.data (), opts);

Здесь необходимо добавить один важный факт: преобразование данных HTML-Атрибут.

data-cool N ame можно открыть следующим образом: this.data (cool n ame)

data-another- c ool- n ame может быть доступен следующим образом this.data (другой C ool N ame)

Подробности: Преобразует ли jQuery внутренние ключи атрибутов данных HTML5 в нижний регистр?

Чувствительность к регистру java и преобразование имени атрибута могут быть ловушкой, если вы не знаете об этом.