（Javascript）| interact.js在同一类不工作的多个div上缩放

我正在尝试使用interact.js来创建一些元素，我可以对它们进行缩放。 但我有一个问题，因为当我复制元素时，它会停止工作

正如您从这里的代码片段中所看到的，我有两个相同的元素，名为

class=signature area

，每个元素内部都有一个带有

class=scale元素的
div

我只能使用
document.querySelector（）
在第一个屏幕上按住缩放按钮

我不知道如何将所有的div都调到收缩缩放

如何在页面上的多个
div
上使用此脚本


函数dragMoveListener（事件）{
var target=event.target
//在data-x/data-y属性中保持拖动位置
var x=（parseFloat（target.getAttribute（'data-x'））| | 0）+event.dx
变量y=（parseFloat（target.getAttribute（'data-y'））| | 0）+event.dy
//翻译元素
target.style.webkitTransform=
target.style.transform=
'翻译（'+x+'px'，+y+'px）'
//更新posiion属性
target.setAttribute（'data-x'，x）
target.setAttribute（'data-y'，y）
}
//这将在稍后的调整大小和手势演示中使用
window.dragmovestender=dragmovestender
可变角度刻度={
角度：0，
比例：1
}
//var gestureArea=document.getElementsByClassName（'手势区域'）
var gestureArea=document.querySelector（“.signature area”）
//var scaleElement=document.getElementsByClassName（'scale-element'））
var scaleElement=document.querySelector（“.scale元素”）
变量重置超时
控制台日志（gestureArea）；
互动（手势区）
.手势({
onstart:函数（事件）{
angleScale.angle-=事件.angle
clearTimeout（重置超时）
scaleElement.classList.remove（'reset'）
},
onmove：函数（事件）{
//document.body.appendChild（新文本（事件规模））
var currentAngle=事件角度+角度刻度角度
var currentScale=event.scale*angleScale.scale
scaleElement.style.WebKittTransform=
scaleElement.style.transform=
'旋转（'+currentAngle+'deg'）+'缩放（'+currentScale+'）”
//使用上面可拖动演示中的dragMoveListener
dragMoveListener（事件）
},
ONED：功能（事件）{
angleScale.angle=angleScale.angle+event.angle
angleScale.scale=angleScale.scale*事件.scale
//重置超时=重置超时（重置，1000）
scaleElement.classList.add（'reset'）
}
})
.DragTable（{onmove:dragMoveListener}）
功能重置（）{
scaleElement.style.WebKittTransform=
scaleElement.style.transform=
‘比例（1）’
angleScale.angle=0
angleScale.scale=1
}

.pinchzoomarea{
显示器：flex；
宽度：300px；
高度：300px；
边缘底部：9px；
证明内容：中心；
对齐项目：居中；
背景色：#a80000；
}
.手势区{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
宽度：100px；
高度：100px；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit盒包：中心；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
}
.比例元素{
显示：块；
最大宽度：100%；
保证金：自动；
触摸动作：无；
宽度：100%；
身高：100%；
背景色：#fff；
背景位置：0px 0px；
背景尺寸：封面；
光标：移动；
}

正常解决， 需要将选择器更改为：

event.target.parentElement.children[0]
现在JS是：

function dragMoveListener (event) {
  var target = event.target

  // keep the dragged position in the data-x/data-y attributes
  var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
  var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

  // translate the element
  target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)'

  // update the posiion attributes
  target.setAttribute('data-x', x)
  target.setAttribute('data-y', y)
}

// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener



var angleScale = {
  angle: 0,
  scale: 1
}


interact('.gesture-area')
  .gesturable({
    onstart: function (event) {
      angleScale.angle -= event.angle

      clearTimeout(resetTimeout)
      //scaleElement.classList.remove('reset')
    },
    onmove: function (event) {
      var currentAngle = event.angle + angleScale.angle
      var currentScale = event.scale * angleScale.scale
      var close = event.target.parentElement.children[0];
      var scaleElement = event.target.parentElement.children[1];
      console.log(scaleElement)

      scaleElement.style.webkitTransform =
      scaleElement.style.transform =
        'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'

      dragMoveListener(event)
    },
    onend: function (event) {
      var close = event.target.parentElement.children[0];
      var scaleElement = event.target.parentElement.children[1];
      angleScale.angle = angleScale.angle + event.angle
      angleScale.scale = angleScale.scale * event.scale

      resetTimeout = setInterval(() => {

      }, interval);(reset, 1000)



    }


  })
  .draggable({ onmove: dragMoveListener })

  function reset () {
      scaleElement.style.webkitTransform =
        scaleElement.style.transform =
        'scale(1)'

      angleScale.angle = 0
      angleScale.scale = 1
      }
  setInterval