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

使用.hover()代替

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

Demo

Answer 2

请告诉我这是否适合您......

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 3

jQuery .on（）是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/

jQuery显示/隐藏呈现重复内容

3 个答案: