6

我有一个 each 方法，我正在利用它来启动一个<td>与其存在的相关的工具提示。在 IE、Chrome、Safari 中一切都很好，但 Firefox 完全缺少 each 方法，并且只启动 DOM 中的最后一个工具提示。

是什么赋予了？

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");
      });
    });
});​
4

2 回答 2

2

实际上几乎永远不需要每个函数迭代元素只是为了将它们绑定到事件处理程序：

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

小提琴

剩下的只是将工具提示放在按钮顶部的位置问题，应该可以用一点 CSS 修复。

于 2012-10-31T19:55:25.483 回答
1

首先它写得很奇怪。尝试 ：

$('.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-31T20:02:59.460 回答