Question

我有两个div（它们看起来就像块，在CSS中分配了背景颜色，宽度和高度值）。我想编写一个函数来选择所有div，这些div的ID包含一个特定的单词，在这种情况下为“ image”。我的div写为：

<div id="image1"> </div>
<div id="image2"> </div>

我希望该函数仅在单击时才在每个div上执行。我有一些接近我想要的东西。单击第一个div时它将正常工作，但是单击第二个div后，它将在两个div上都执行代码。我的代码只是一个简单的GSAP时间轴。

window.addEventListener("mousedown", function(e){
  if(e.target.id.includes("image")){
    var target = e.target;
    tl.to(target, .6, {x: ($(".container").width()/2) + (target.style.width/2), y:($(".container").height()/2) * -1 + (target.style.height/2)}, 0);
    tl.reversed() ? tl.play() : tl.reverse();
  }
})

我的GSAP时间轴在函数上方声明为-

var tl = new TimelineMax({paused:true, reversed:true});

这几乎可以正常工作，但是我不知道如何更改它，以便它仅在单击的div上执行该功能。我曾尝试将e.target更改为e.currentTarget和$（e.target），但是我对代码还是很陌生，我不太了解所有这些工作原理。

我尝试过的另一个根本不起作用的功能（说div是未定义的）是这个-

$(div[id*="image"]).each(function(){
  $(this).on("click", function(){
  var target = $(this);
  tl.to(target, .6, {x: ($(".container").width()/2) + (target.style.width/2), y:($(".container").height()/2) * -1 + (target.style.height/2)}, 0);
  tl.reversed() ? tl.play() : tl.reverse();
  })
})

非常感谢任何建议。

在每个div上迭代一个函数，其id包含特定单词

0 个答案: