javascript - 如何仅为单击的元素而不是整个类运行函数

Question

我正在寻找一种方法来单独调整页面上的几个 div 的大小（如浏览器窗口，您可以从底角调整大小），保持相同的比例/比率。我使代码适用于 .handle 和 .dragger 类，但是具有相同类的所有 div 都同时被修改，而我希望它只对我们单击的 div执行。

这是我正在使用的调整大小的代码：

    $(".handle").bind('mousedown', draggerDown);
    $("body").bind('mouseup', draggerUp);

    function calculateNewSize(size) {
        // {currHeight, currWidth, newHeight, newWidth, offsetX, offsetY}
        
        var newWidth;
        var newHeight;

        if (Math.abs(size.offsetX) > Math.abs(size.offsetY)) {
            newWidth = size.currWidth + size.offsetX;
            newHeight = newWidth * (size.currHeight / size.currWidth);
        } else {
            newHeight = size.currHeight + size.offsetY;
            newWidth = newHeight * (size.currWidth / size.currHeight);
        }

        return {
            "height": newHeight,
            "width": newWidth
        };
    }

    function draggerDown() {
        event.stopPropagation();
        event.preventDefault();

        currentX = event.pageX;
        currentY = event.pageY;
        
        currentHeight = $(".dragger").height();
        currentWidth = $(".dragger").width();

        $("body").bind('mousemove', draggerMove);
    }

    function draggerMove() {
        var draggerElements = document.getElementsByClassName("dragger");
        for (var n = 0; n < draggerElements.length; ++n) {

        var targetStyle = window.getComputedStyle(draggerElements[n], null);
        var newHeight = currentHeight + (event.pageY - currentY);
        var newWidth = currentWidth + (event.pageX - currentX);
        
        // AT THIS POINT, THE LOGIC COMES IN.
        // CUSTOMIZE 'calculateNewSize' function above

        var newSize = calculateNewSize({
            "currHeight": currentHeight,
            "currWidth": currentWidth,
            "newHeight": newHeight,
            "newWidth": newWidth,
            "offsetX": (event.pageX - currentX),
            "offsetY": (event.pageY - currentY)
        });
        
        currentHeight = newSize.height;
        currentWidth = newSize.width;
        
        newHeight = newSize.height;
        newWidth = newSize.width;

        // AT THIS POINT, THE LOGIC IS DONE.
        // SIZES SHOULD BE COOL NOW

        $(".dragger").css("height", newHeight + "px");
        $(".dragger").css("width", newWidth + "px");
        
        console.log($(".dragger").height());

        currentX = event.pageX;
        currentY = event.pageY;
    }
    }
    function draggerUp() {
        $("body").unbind('mousemove');
    }


      // tell the embed parent frame the height of the content
      if (window.parent && window.parent.parent){
        window.parent.parent.postMessage(["resultsFrame", {
          height: document.body.getBoundingClientRect().height,
          slug: "xUAZ5"
        }], "*")
      }

      // always overwrite window.name, in case users try to set it manually
      window.name = "result"
}

我正在尝试使用该方法（来自另一个项目）来做到这一点，但我真的不知道它是否可以与以前的代码一起使用：

var u; 

for(var i=1; i<13; i++) {
    var specificClass= document.getElementsByClassName("class"+i);

    for (u = 0; u < specificClass.length; u++) {
        specificClass[u].addEventListener("click", thefunction);
    }
}

function thefunction(evenement) {
//    alert(evenement.target.classList)
    var clickedElement = document.getElementsByClassName(evenement.target.classList);
    for (u = 0; u < clickedElement.length; u++) {
        clickedElement[u].style etc.
    }
}

在那种情况下，我会使用这两组类：handle1、handle2、handle3、...和dragger1、dragger2、dragger3...

这是我简化的 html 正文：

<div class="draggableDiv dragger div1">
  <div class="handle"></div>
</div>

<div class="draggableDiv dragger div2">
  <div class="handle"></div>
</div>

当然，任何其他方法都非常受欢迎，这只是我一直在尝试的方法:) 如果您需要更多详细信息，请告诉我谢谢！

标签： javascriptjquerylistresize