0

同じ要素に対して異なる機能を提供する 2 つの 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();

2 番目の関数は、リンク アイテムがクリックされたときにコンテンツ ペインを切り替えます (マークアップには表示されませんが、これは機能します!)。また、link タグ内の画像を変更し、.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バインドします。lookFademouseentermouseleave

簡単な例:

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