jQuery显示/隐藏渲染重复内容

Question

我是jquery的新手，所以请耐心听我说。我在多个div上做了一个简单的显示/隐藏。基本上，你将鼠标悬停在一个带有类的图像上，然后显示来自带有相应类的div的内容。我遇到的情况是，如果你将鼠标悬停在一张图片上，然后又将鼠标悬停在另一张图片上，有时我会看到前一次悬停的内容和当前悬停的内容本质上是重复的内容。这真的是只有当你快速悬停在图像上时才会这样，但还是会让人恼火。你知道为什么会发生这种情况吗？

jQuery('document').ready(function(){

  jQuery('.company').not(':first').hide();

  jQuery('#company_container img').on('hover', function(){

var contenttoShow = jQuery(this).attr('data-title');

    contenttoShow2 = jQuery(contenttoShow);
    jQuery('.company').hide();
    contenttoShow2.fadeIn(500);
  });

});

<div class="company" id="company_1">
<p>some content goes here</p>
</div>

<div class="company" id="company_2">
<p>some content goes here</p>
</div>

<div class="company" id="company_3">
<p>some content goes here</p>
</div>

<div id="company_container">
 <a title="" href="#"><img data-title="#company_1" src="test.jpg" /></a>
 <a title="" href="#"><img data-title="#company_2" src="test2.jpg" /></a>
 <a title="" href="#"><img data-title="#company_3" src="test3.jpg" /></a>
</div>

Answer 1

如果这对你有效，请告诉我。

jQuery('.company').not(':first').hide();

jQuery('#company_container img').mouseover(function() {
   jQuery('.company').hide();
   var contenttoShow = jQuery(this).attr('data-title');
   jQuery(contenttoShow).fadeIn(500);      

});

http://jsfiddle.net/ba6SZ/

Answer 2

请改用.hover()

jQuery('#company_container img').hover(function () {

Answer 3

jQuery .on() is to Attach an event handler function for one or more events to the selected elements.

http://api.jquery.com/on/

通常用于将事件附加到动态创建的元素。

注意多事件绑定。在这个小演示中，每次单击该框都会在2^x的递增次数中被触发。(x为点击计数)。这让我抓狂了一段时间。

http://jsfiddle.net/chrisloughnane/acNwn/