jQuery .each（）方法在Firefox中不起作用

我有一種方法可以用來啓動與其存在的<td>相關的工具提示。在IE，Chrome，Safari中一切都很好，但Firefox完全缺少每種方法，並且只啓動DOM中的最後一個工具提示。jQuery .each（）方法在Firefox中不起作用

什麼給？

http://jsfiddle.net/yus5b/

HTML：

<div class="stage"> 
    <div class="dealFinder"> 
     <h2 class="title">Deal Finder in Your Area</h2> 
     <table cellpadding="5"> 
      <tr> 
      <td class="text"> 
       <p class="makeModel"><a href="#">2012 Land Rover Range Rover Evoque</a><br>in Oak Lawn</p> 
      <a class="youSave" href="#" onclick="return false"> You Save at Least $14,810</a> 
      <div class="tooltip"> 
       <div class="inner"> 
       <b>2012 Land Rover Range Rover Evoque</b> 
       <span>Your Price $19,330</span> 
       <p>The National Average is <b>$21,500</b></p> 
       </div> 
      </div> 
      </td> 
      <td class="pic"> 
       <a href="#"><img src="http://placehold.it/113x75" /></a> 
      </td> 
     </tr> 
     <tr> 
      <td class="text"> 
      <p class="makeModel"><a href="#">2012 Land Rover Range Rover Evoque</a><br>in Oak Lawn</p> 
      <a class="youSave" href="#" onclick="return false"> You Save at Least $14,810</a> 
      <div class="tooltip"> 
       <div class="inner"> 
       <b>2012 Land Rover Range Rover Evoque</b> 
       <span><small>Your Price</small> $19,330</span> 
       <p>The National Average is <b>$21,500</b></p> 
       </div> 
      </div> 
      </td> 
      <td class="pic"> 
      <a href="#"><img src="http://placehold.it/113x75" /></a> 
      </td> 
     </tr> 
     </table> 
    </div><!-- .dealFinder --> 
</div>

的jQuery：

$(document).ready(function() { 
    // Tooltip 
    $('.tooltip').hide(); 
    $('.text').each(function(e) { 
     var self = this; 
     var tooltip = $(self).find('.tooltip'); 
     var youSave = $(self).find('.youSave'); 
     $(youSave).mouseenter(function(e) { 
     $(self).find(tooltip).fadeIn("slow"); 
     }); 
     $(youSave).mouseleave(function(e) { 
     $(self).find(tooltip).fadeOut("fast"); 
     }); 
    }); 
});

來源

2012-10-31 robabby

真的嗎？ 2降價？解釋爲什麼會很好。 JSFiddle提供了一個明確的問題？ – robabby

我看到它啓動了工具提示 - 它只是因爲tooltip獲得焦點並導致它消失而觸發。在Mac上使用FF。 –

*「JSFiddle提供了一個明確的問題？」* http://meta.stackexchange.com/questions/149890/prevent-posts-with-links-to-jsfiddle-and-no-code如果JSFiddle發生故障或陷入困境（因爲它是昨天和過去的其他時間），你提出的問題將不會被回答。 –

開始寫它很奇怪。嘗試：

$('.text .youSave').mouseenter(function(){ 
    var item = $(this); 
    var tooltip = $('.tooltip', item.parent()).fadeIn(); 
}); 

//the same way for mouseleave

並提供工具提示顯示：默認情況下沒有爲什麼用js更改它？

我看到了問題。工具提示淡入你的鼠標所在的位置，並觸發事件mouseleave。易於修復。提示必須是.youSave子元素：

<a class="youSave" href="#" onclick="return false"><span> You Save at Least $14,810<span> 
<div class="tooltip"> 
        <div class="inner"> 
        <b>2012 Land Rover Range Rover Evoque</b> 
        <span>Your Price $19,330</span> 
        <p>The Web2Carz National Average is <b>$21,500</b></p> 
        </div> 
</a>

然後JS：

$('.text .youSave').mouseenter(function(){ 
    var item = $(this); 
    var tooltip = $('.tooltip', item).fadeIn(); 
});

來源

2012-10-31 20:02:59

很好的捕捉必要的HTML結構變化。這對我有用。謝謝！ – robabby

真有幾乎從不應該是需要的每個功能遍歷元素只是將它們綁定到事件處理程序：

$(document).ready(function() { 
    $('.tooltip').hide(); 
    $('.youSave', '.text').on('mouseenter mouseleave', function() { 
     $(this).next('.tooltip').fadeToggle('slow'); 
    }); 
});

FIDDLE

剩下的就是放置工具提示放在按鈕上方的位置問題，應該用一點CSS修復。

來源

2012-10-31 19:55:25 adeneo

這是一個非常精簡的jQuery代碼片段，但在FFox中的行爲仍然相同。 – robabby

它獲得正確的工具提示，但它們幾乎相同，我在這裏更改了文本：http://jsfiddle.net/yus5b/5/以表明它確實得到正確的。另一個問題是糟糕的CSS佈局。 – adeneo

我想我明白了。 Firefox似乎有一段觸摸時間來解釋父母''的'位置：親戚'。將工具提示改爲「位置：相對」而不是「絕對」，給了我每個''中的工具提示，只要它破壞了設計，但實際上顯示每個相對父元素都加載了單獨的工具提示。 – robabby

jQuery .each（）方法在Firefox中不起作用

回答

相關問題