我在指定将“this”与 jquery 一起使用时遇到问题答案

【问题标题】：I am having issues specifying using "this" with jquery我在指定将“this”与 jquery 一起使用时遇到问题
【发布时间】：2016-01-13 03:38:55
【问题描述】：

我想要做的是单击一个 div 并仅使用 TweenMax 和 JQuery 库来缩放该特定 div。目前，下面的示例正在更新所有 flex-items div。

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});
}

【问题讨论】：

你真的不应该使用onclick 属性。如果你使用 jQuery，你应该使用$('.flex-items').on('click', function(){ ... }); 或更接近你当前的代码$('.flex-items').on('click', mouseOver);
或仅.click(function()...api.jquery.com/click
click() 在这种情况下就足够了，当您需要使用 off() 从元素中删除函数时， on() 很有用
感谢您的澄清！

标签： jquery css flexbox gsap

【解决方案1】：

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

另外，您应该使用带有匿名回调函数的 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>

【讨论】：

我的速度更快mwuhahaha
你比他快了整整 17 秒。 :P
公平地说，我花时间解释了问题所在
下次先贴出要领，然后再编辑添加解释以赢得：D

【解决方案2】：

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

你的意思是这样的？

【讨论】：