javascript - jQuery $(this) 不起作用

Question

我在这里尝试的是悬停时，div id 放大有一个小动画 - 动画正在工作 - 但它一次不能工作多个 div。如果我偶然做错了，请寻求一些指导。

jQuery

<script type="text/javascript">
$(document).ready(function(){
$("#project-holder").hover(function(){
    $(".client"+$(this).attr("client")).stop().animate({'margin-left': '130px', 'margin-top': '80px'}, 500);
  }, function(){
    $(".client"+$(this).attr("client")).stop().animate({'margin-left': '-200px'}, 500);
  });
});
</script>

div 的一个示例是:

<div id="project-holder" client="1">
  <div id="magnify" class="client1">
    <img src="magnify.png">
  </div>
</div>

Answer 1

更改您的 HTML 以使用类。 ID 是唯一的，同一 ID 不能多次使用:

<div class="project-holder">
  <div class="magnify client">
    <img src="magnify.png">
  </div>
</div>

现在，你可以将你的 JS 更改为这样，它应该可以正常工作:

$(document).ready(function(){
  $(".project-holder").hover(function(){
    $(this).find('.client').stop().animate({'margin-left': '130px', 'margin-top': '80px'}, 500);
  }, function(){
    $(this).find('.client').stop().animate({'margin-left': '-200px'}, 500);
  });
});