影响类的所有成员而不是一个元素事件的插件正在发生

plugin affecting all members of class instead of one element event is taking place on

本文关键字：事件 元素 一个 插件 成员 影响      更新时间：2023-09-26

我写了一个jQuery插件来缩小一个对象。

我有多个对象需要页面的这种交互，所以我给了它们一个类并将插件应用于该类。

但是，当我捏住一个时，该类的所有成员都被缩放了。

如何更改插件，以便仅缩放我正在捏合的插件？

以下是该页面的实时示例：http://goo.gl/OW5PKc

这是插件：

function collapse(container, element){
    container = $(container).hammer({
        prevent_default: true,
        scale_treshold: 0
    });
    element = $(element);
    var displayWidth = container.width();
    var displayHeight = container.height();
    var MIN_ZOOM = 0;
    var MAX_ZOOM = 1;
    var scaleFactor = 1;
    var previousScaleFactor = 1;
    var startX = 0;
    var startY = 0;
    var translateX = 0;
    var translateY = 0;
    var previousTranslateX = 0;
    var previousTranslateY = 0;
    var time = 1;
    var tch1 = 0, 
        tch2 = 0, 
        tcX = 0, 
        tcY = 0,
        toX = 0,
        toY = 0,
        cssOrigin = "";
    container.bind("transformstart", function(event){
        e = event
        tch1 = [e.touches[0].x, e.touches[0].y],
        tch2 = [e.touches[1].x, e.touches[1].y]
        tcX = (tch1[0]+tch2[0])/2,
        tcY = (tch1[1]+tch2[1])/2
        toX = tcX
        toY = tcY
        var left = $(element).offset().left;
        var top = $(element).offset().top;
        cssOrigin = (-(left) + toX)/scaleFactor +"px "+ (-(top) + toY)/scaleFactor +"px";
    });
    container.bind("transform", function(event){
        scaleFactor = previousScaleFactor * event.scale;
        scaleFactor = Math.max(MIN_ZOOM, Math.min(scaleFactor, MAX_ZOOM));
        transform(event);
    });
    container.bind("transformend", function(event){
        previousScaleFactor = scaleFactor;
        if(scaleFactor > 0.42){
            $(element).css('-webkit-transform', 'scaleY(1.0)').css('transform', 'scaleY(1.0)');
        }
    });
    function transform(e){
        var cssScale = "scaleY("+ scaleFactor +")";
        element.css({
            webkitTransform: cssScale,
            webkitTransformOrigin: cssOrigin,
            transform: cssScale,
            transformOrigin: cssOrigin,
        });
        if(scaleFactor <= 0.42){
            $(element).animate({height:0}, function(){
                $(this).remove();
            });
        }
    }
}
$.fn.collapse = function(filter) {
    return this.each(function(){
        collapse(this,filter);
    });
}

您传入的过滤器对象很可能是 jQuery 对象（对象数组）。 目标（容器）上有this.each，但不包含所有对象的筛选器。 我不会将过滤器作为参数传递。 相反，在 collapse（） 内部使用选择器（子或父）

更新：

$.fn.collapse = function() {
return this.each(function(){
    collapse(this);
});

}

如果过滤器是容器的子项，则函数的开头变为：

function collapse(container){
container = $(container).hammer({
    prevent_default: true,
    scale_treshold: 0
});
element = $('.elementClass', container);

如果您不知道要使用哪个选择器，可以在此处更熟悉它们。http://api.jquery.com/category/selectors/

相关文章：