jquery - 每个元素都有自己的数据变量

Question

我正在创建一个 jquery 插件，我需要在每个目标元素处提供一个变量。我的问题是当我在我的 js 中这样做时：

$("section ul").cards("init", {
    current: 0
}).on("mousewheel", mousewheel);

function mousewheel(){
    $(this).cards("next");
};

该插件已console.log()更新为current. 但是他将相同的数据更新为所有“ul”。

当 Imousewheel在第一个ul中时，它的电流变为 1（开始为 0），而mousewheel在第二个中的I 之后ul，电流变为 2...

我希望每个对象都有自己的变量（$(this).data()）

谢谢 ！

！！编辑 ！！

有我的插件库：

(function($){

    $.fn.cartes = function( methode, options ){

        if(options){
            return methodes[methode].apply(this, $.makeArray(options));
        }
        else {
            return methodes[methode].call(this);
        };

    };

    var methodes = {
        init: function( options ){

            return this.each(function(){

                var $this = $(this);
                var Options = $.meta ? $.extend( $.fn.cartes.defauts, options, $this.data() ) : options;

                $this.data("options", Options);

                $this.each(function(index){

                    $this.data("options").rotation = $.fn.cartes.defauts.rotation;
                    $this.data("options").espacement = $.fn.cartes.defauts.espacement;

                });

            });

        },
        prec: function(obj){

            return $(obj).each(function(){
                $(this).data("options").cur--;
                console.log( $(this).data("options").cur );
            });

        },

        next: function(obj){

            return $(obj).each(function(){
                $(this).data("options").cur++;
                console.log( $(this).data("options").cur );
            });

        }
    };

    $.fn.cartes.defauts = {
        cur: 0,
        espacement: 0,
        rotation: -45
    };

})(jQuery);

！！编辑2！

当我使用每个循环时，console.log事件中的mousewheel返回好的数据。

$("section li.double ul").each(function(){
  $(this).cartes("init", {
    actuel: 0,
    selecteur: "li"
  });
});

但是如何在没有每个循环的情况下做到这一点。

Answer 1

在插件中，通常使用.each循环将插件应用于每个元素，例如：

init: function(opts) {
    return $.each(function() {
        ...
    });
}

然后您可以.data在.each循环中使用，为每个元素提供自己的数据。您还需要先克隆对象，$.extend()然后再将其存储在 中.data()，否则每个元素仍将共享对相同数据的引用。

Answer 2

;(function($){
  $.fn.extend({
    cards: function(){
      return this.each(function(i,e){
        //
        // additional plugin logic
        //

        // `this` represents every item you're manipulating. here you
        // can assign `.data()` to each one (with its own specific value(s)).
        // For instance:
        $(this).data('whatevername', 'whatevervalue');

        //
        // additional plugin logic
        //
      });
    }
  });
})(jQuery);

类似的东西？

Answer 3

您必须取消引用鼠标指针的位置才能获得当前悬停在上方的卡片。

Answer 4

最后，只是因为：

var Options = $.meta ? $.extend( $.fn.cartes.defauts, options, $this.data() ) : options;

将其替换为：

var Options = $.extend( $.fn.cartes.defauts, options, $this.data() );

它工作！