jQuery 的 .data() 没有将属性附加到 DOMElement

Question

所以我写了这个非常简单的 jQuery 滑块插件。我尝试使用 .data() 设置 data-* 属性，但这似乎没有效果，因为没有向 DOM 元素添加任何内容。

如果我使用 .attr('data-image', myVar); 它仍然有效。

代码如下：

;(function($) {

    $.fn.extend({
        sdSlider: function(options) {
            if (options && typeof(options) == 'object') {
                options = $.extend({}, $.sdSlider.defaults, options);
            }

            if($(this).length == 1) {
                new $.sdSlider(this, options);
            }

            return this;
        }
    });

    $.sdSlider = function(elem, option) {
        $(window).on('load', function() {

            var options  = option || $.sdSlider.defaults
            , $li = $(elem).find('> li')
            , $img = $li.find('> img')
            , imgSrcs = [];

            $(elem).find('> li:first-child').addClass('active');

            $img.each(function(i) {
                $(this).data('image', i); // this doesn't work
                $(this).attr('data-image', i); // this, however, works
            });

            // much more code

            return;
        });
    };

    // much more code too...

    $.sdSlider.defaults = {};

})(jQuery);

为此HTML:

<ul id="slider">
    <li><img src="http://lorempixel.com/700/350/sports/1" alt="slider_1"/></li>
    <li><img src="http://lorempixel.com/750/300/sports/2" alt="slider_2"/></li>
    <li><img src="http://lorempixel.com/600/200/sports/3" alt="slider_3"/></li>
    <li><img src="http://lorempixel.com/550/400/sports/4" alt="slider_4"/></li>
</ul>

使用此插件实例化：

jQuery(function($) {
    $('#slider').sdSlider();
});

所以这是范围的问题吗？然而，我的目标是 $(elem) 一开始就代表传递给插件的元素。

我在这里错过了什么？为什么 data-image 属性没有添加到 <img> 元素？

Answer 1

jQuery.data() 不更新 DOM 元素 HTML5 data-* 属性

jQuery 的 .data() 没有将属性附加到 DOMElement

jQuery's .data() doesn't append attribute to DOMElement

html

javascript

jquery

plugins