我在指定使用 "this" 和 jquery 时遇到问题

Question

我想要做的是单击 div 并仅使用 TweenMax 和 JQuery 库缩放特定 div。当前，下面的示例正在更新所有弹性项目 divs。

HTML:

<div class="main-content">
        <div class="flex-container">
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
        </div>
    </div>

JS:

function mouseOver(){
    var flexItem = $(".flex-items");
    TweenLite.to(flexItem, 1.5, {width: 500, height: 500, ease:Power2.easeOut});
}

Answer 1

function mouseOver(){
    var flexItem = $(this);
    TweenLite.to(flexItem, 1.5, {width: 500, height: 500, ease:Power2.easeOut});
}

你的意思是这样？

Answer 2

每次函数运行时您都选择了所有项目。

此外，您应该将 jquery 的 .on() 与匿名回调函数一起使用，而不是将 onclick 属性与不必要的命名函数一起使用

尝试这样的事情

$('.flex-items').on('click', function() {
  // This is the problem, you are selecting all flex-items everytime
  // var flexItem = $(".flex-items");

  // This should work
  var flexItem = $(this);
  TweenLite.to(flexItem, 1.5, {
    width: 500,
    height: 500,
    ease: Power2.easeOut
  });
});

<div class="main-content">
  <div class="flex-container">
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
  </div>
</div>

我在指定使用 "this" 和 jquery 时遇到问题

I am having issues specifying using "this" with jquery

jquery

css

flexbox

gsap