0

我有两个 jQuery 函数，它们为相同的元素提供不同的功能。

这是我的基本 HTML 标记：

<ul>
  <li class="active">
    <a href="#head1" data-toggle="tab" class="fade">
      <img src="head1_down.jpg" />
    </a>
  </li>
  <li>
    <a href="#head2" data-toggle="tab" class="fade">
      <img src="head2_down.jpg" />
    </a>
  </li>
  <li>
    <a href="#head3" data-toggle="tab">
      <img src="head2_down.jpg" />
      <!-- Does not fade! No .fade class on link tag. -->
    </a>
  </li>
</ul>

第一个函数lookFade()添加了一个淡入淡出效果，可以改变鼠标悬停时图像的来源：

// Helper functions
$.fn.lookUp = function() {
  $(this).attr('src', function(i,val) { return val.replace('down.jpg', 'up.jpg') });
  return $(this);
}

$.fn.lookDown = function() {
  $(this).attr('src', function(i,val) { return val.replace('up.jpg', 'down.jpg') });
  return $(this);
}

$.fn.lookFade = function() {
  $(this).hover(
    function() {
      $(this).fadeOut(function() {
        $(this).lookUp().fadeIn();
      })
    },
    function() {
      $(this).fadeOut(function() {
        $(this).lookDown().fadeIn();
      })
    }
  );
  return $(this);
}

// Change .active image on pageload
$('li.active > a.fade > img').lookUp();

// Fade effect on hover
$('li:not(.active) > a.fade > img').lookFade();

第二个函数在单击链接项时切换内容窗格（未显示在标记中，这有效！）。它还会更改链接标签内的图像，并将 .active 类从当前的 li 元素更改为单击的 li 元素。

// Toggle tabs and change .active
$('a[data-toggle="tab"]').click(function() {
  var head = $(this).attr('href');
  var active = "#" + $('.pane.active').attr('id');
  if (head != active) {
    $(active).removeClass('active');
    $(head).addClass('active');
    $(this).children('img').lookUp();
    $(this).parent().parent().children('li.active').removeClass('active');
    $(this).parent().addClass('active');
  }
});

问题：单击链接时，内容窗格会发生变化，甚至类也会正确调整。但是该lookFade()功能无法识别类更改，并且对于现在的 .active li 元素仍然会淡出（对于那些通过单击失去此类的人不会）。

谢谢阅读。我期待您的帮助:)

4

1 回答 1

1

更改元素的类不会更改绑定到它的事件。事件绑定到元素，而不是类。如果您想要这种类型的功能，请使用带有.on()或.delegate()的事件委托

由于您使用插件来执行这些操作，因此使其工作并不容易。我会放弃该方法并使用事件委托lookFade绑定lookFade事件（mouseenter和）。mouseleave

快速示例：

$('ul').delegate('li:not(.active) > a.fade > img','mouseenter',function(){
    $(this).fadeOut(function() {
        $(this).lookUp().fadeIn();
    });
});
于 2012-05-23T14:38:02.920 回答