I am having issues specifying using "this" with jquery

Question

What I want to be able to do is click on a div and scale that particular div only using the TweenMax and JQuery libraries. Currently the example below is updating all the flex-items 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

You are selecting all the items every time the function runs.

Also, you should use jquery's .on() with an anonymous callback function instead of the onclick attribute with an unnecessary named function

Try something like this

$('.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>