動態html圖像和跨度上的jquery onmouseover（）函數

我在頁面上有一些圖像和一些跨度文本。每個圖像都有他的文本，並且這些元素通過javascript來動態添加。動態html圖像和跨度上的jquery onmouseover（）函數

現在，我想在鼠標懸停在圖像上時顯示正確的消息。

這是不容易解釋，因此，這裏的例子：

var len = article_affiliations.length; 
for (var affiliation_id = 0; affiliation_id < len; affiliation_id++) 
{ 
    $('#country_warning' + affiliation_id).mouseover(function() { 
     document.getElementById('country_warning_message' + affiliation_id) 
      .style.visibility = 'visible'; 
    }).mouseout(function() { 
     document.getElementById('country_warning_message' + affiliation_id) 
      .style.visibility = 'hidden'; 
    }); 
}

的問題是，當的onmouseover函數將被調用時，affiliation_id將有最大值和消息將接近顯示最後一張圖片，而不是附近的圖片。

非常感謝您的幫助。

來源

2012-07-19 Miloš

您可能想要了解JavaScript關閉 – Musa 2012-07-19 15:03:30

Hi Ana，因爲Musa提到您需要在for循環中使用閉包。有一個很棒的SO帖子解釋你的問題和解決方案：http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – 2012-07-19 20:23:57

謝謝@Musa。 – 2012-07-20 06:48:37

閉幕應該做的伎倆：

for(var affiliation_id=0; affiliation_id<article_affiliations.length; affiliation_id++) { 
    (function(i){ 
     $('#country_warning'+i).mouseover(function() { 
       $('#country_warning_message'+i).css('visibility','visible'); 
     }).mouseout(function(){ 
       $('#country_warning_message'+i).css('visibility','hidden'); 
     }); 
    })(affiliation_id); 
}

來源

2012-07-19 15:02:36 Engineer

非常感謝，我現在明白了，它完美的工作。 – 2012-07-19 15:07:21

你需要在一個封閉綁定你的for循環這個工作。這樣，#country_warning_i的所有指數都會受到影響。

$(function() { 
    $.each(article_affiliations, function (i, v) { 
     $('#country_warning' + i).mouseover(function (affiliation_id, affiliation_iddddd) { 
      $('country_warning_message' + i).style.visibility = 'visible'; 
     }).mouseout(function (i, affiliation_iddddd) { 
      $('country_warning_message' + i).style.visibility = 'hidden'; 
     }); 
    }); 
});

享受和祝你好運！

來源

2012-07-19 15:03:04

非常感謝，我現在明白了，它完美的工作。 – 2012-07-19 15:07:37

你不應該用一個循環來完成每個元素的循環。做這種事情的最好方法是使用'event.target'（內置jQuery）和'this'對象。

而不是將鼠標懸停事件處理程序附加到您的父級。最好的是，如果您的標記看起來是這樣的：

<div class="item"> 
<img src="someimage.jpg" /> 
<span>some text</span> 
</div> 
<div class="item"> 
<img src="someimage.jpg" /> 
<span>some text</span> 
</div> 
<div class="item"> 
<img src="someimage.jpg" /> 
<span>some text</span> 
</div>

這樣，你可以使用類似下面這樣的腳本：

$('.item').on('mouseover', function() { 
$(this).find('span').show(); 
});

這將搜索元素中的跨度（每個跨度）您將鼠標懸停事件附加到（爲此前）。

另一種方法是使用簡單的CSS是這樣的：

span { 
visibility: hidden; 
} 
item:hover span { 
visibility: visible; 
}

這是一個非常簡單的解決方案和工作很漂亮，但不幸的是IE6不支持從不同的元素懸停。

來源

2012-07-19 15:08:24 Martin

動態html圖像和跨度上的jquery onmouseover（）函數

回答

相關問題