jQuery的.data（）不会将属性追加到DOMElement [英] jQuery's .data() doesn't append attribute to DOMElement

问题描述

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

如果我使用 .attr（'data-image'，myVar）; 它可以工作。

这里是代码：

 ;（函数（$）{
 
 $ .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）.fin d（'> li'）
，$ img = $ li.find（'> img'）
，imgSrcs = []; 
 
 $（elem）.find（'> li：first-child'）。addClass（'active'）; 
 
 $ img.each（function（i）{
 $（this）.data（'image'，i）; //这不起作用
 $（this ）.attr（'data-image'，i）; //这个，但是，工程
}）; 
 
 //多得多的代码
 
 return; 
}）; 
}; 
 
 //更多的代码太多... 
 
 $ .sdSlider.defaults = {}; 
 
}）（jQuery）; 
  

对于这个HTML：

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

使用这个插件实例：

<$ p $ jQuery（function（$）{
$（'＃slider'）。sdSlider（）;
}）;

那么这是一个范围问题吗？然而，我最初的目标是 $（elem），它表示传递给插件的元素。

我在这里错过了什么？为什么数据图像属性未添加到< img> 元素中？

解决方案

jQuery.data（）不会更新 DOM 元素 HTML5 data - * 属性

So I have this very simple jQuery slider plugin I wrote. I try to set data-* attribute with .data() but this seems to have no effect as nothing is added to the DOM element.

If I use .attr('data-image', myVar); it works though.

Here is the code:

;(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);

For this 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>

With this plugin instanciation:

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

So is this a problem of scope? Yet I'm targetting $(elem) at the very beginning which represents the element passed to the plugin.

What am I missing here? Why is the data-image attribute not added to the <img> element?

解决方案

jQuery.data() does not update DOM elements HTML5 data-* attribute

这篇关于jQuery的.data（）不会将属性追加到DOMElement的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！