Question

我有两个 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 () 添加一个淡化效果, 改变 mousehover 上的图像源 :

// 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();

第二个函数在单击链接项时切换内容窗格( 未在标记中显示, 此工作! ) 。它还会更改链接标签内的图像, 并更改 < code>. 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 );
  }
});

problem: 当点击一个链接, 它使内容窗面发生改变, 甚至班级也得到正确调整。但 LookFade () 函数不承认类的变化, 但仍会为现在的. active li 元素淡化。

Answer 1

更改元素的类别不会改变它所约束的事件。事件是受元素约束的, 而不是该类。如果您想要该类型的功能, 请使用 < a href=" http:// api.jquery.com/ on/ " rel=" nofollow". on () 或 < a href=" http:// api.jquery.com/ delgate/" rel=" nofolp".delegate ()

由于您正在使用插件来执行这些动作, 使其生效并不容易。我将放弃 < code> LookFade 方法, 并使用事件授权约束 < code> LookFade 事件 ( mouseenter 和 museleave ) 。

快速示例 :

$( ul ).delegate( li:not(.active) > a.fade > img , mouseenter ,function(){
    $(this).fadeOut(function() {
        $(this).lookUp().fadeIn();
    });
});

友情链接