Question

我有一堆带有以下HTML的框

<div class="col-md-3 well content-boxes">
  <div class="icon-container">
    <img src="img/icon4.jpeg" />
  </div>
  <h2>Manicures & Pedicures</h2>
  <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <a class="btn btn-default" role="button">View details &raquo;</a>
</div>

以下JavaScript

var $image = $(this).siblings('.icon-container');

$(document).on('click', '.content-boxes .btn', function() {
        TweenMax.to($image, 1.5, {css:{rotation:90}, ease:Back.easeOut})
});

但是，我的图像不会旋转。如果我将$ image更改为$（＆＃39; .icon-container＆＃39;）那么它们都会旋转，但我只想要按下该按钮的兄弟.icon-container来旋转。

Answer 1

您没有$image的正确上下文，因为点击处理程序之外的this对应于文档对象。

而是将$image检查移到点击处理程序内。

$(document).on('click', '.content-boxes .btn', function() {
    var $image = $(this).closest('.content-boxes').find('.icon-container');

    TweenMax.to($image, 1.5, {css:{rotation:90}, ease:Back.easeOut})
});

试图用绿色摇滚来瞄准兄弟姐妹和动画片

1 个答案: