Question

我正在创建一个jquery插件，我需要在每个目标元素上给出一个变量。我的问题是，当我在我的js中执行此操作时：

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

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

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

当我在第一个mousewheel中ul时，它的当前值变为1（开始为0），并且在第二个mousewheel中的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() );

它有效！

拥有每个元素的数据var

4 个答案: