Jqueryクラスのチェックと変更

Question

昨日私が書いたイメージの切り替えスクリプトに関する助けを頼んだ質問を投稿しました。私はスクリプトを拡張し、問題のある場所に私の人生のためにはできない問題にぶつかってきました。

HTML：

<div id="feature-image"> 
    <h1><span>A random heading</span></h1> 
</div> 

<div id="feature-links"> 
    <a class="a1" href="#">1</a> 
    <a class="a2" href="#">2</a> 
    <a class="a3" href="#">3</a> 
</div> 

JS +のjQuery：各<a>タグは（A1、A2、A3のクラスを持っている

私は <a>タグに clickをチェックするスクリプトで

$(function(){ 
    $('#feature-links a').click(function() { 

     if ($(this).hasClass('a-active')) { 
      return false; 
     } else { 

    var image = $(this).attr('class'); 

     switchToImg(image, function() { 
      $('#feature-links a .a-active').removeClass('a-active'); 
      $('#feature-links .' + image).addClass('a-active'); 
     }); 
    } 
}); 

function switchToImg(image){ 
    $('#feature-image').fadeOut('300', function(){ 
     $('#feature-image').css('background-image','url(images/main_' + image + '.jpg)'); 
     $('#feature-image').fadeIn('300'); 
    });  
};    

、等。）。また、アクティブな<a>には 'a-active'のクラスがあります。

私はa-activeがこれで設定されているかどうかを確認しようとしています：

if ($(this).hasClass('a-active')) { 
    return false; 
} 

と、それは同じ画像にし、フェードアウトしないように、そこにスクリプトをカット。しかし、クラスa-activeをチェックしてfalseを返すと、返されたにもかかわらずイメージはフェードインとフェードアウトし続けます。私は.addClassと.removeClassを使用しているセクションに問題があると確信していますが、JavascriptとJqueryの知識はこれを適切にデバッグするためにぼんやりとしています。

誰かがこれ以上重視してもらえますか？

ありがとうございます。

Answer 1

あなたは間違って1を受け入れていない、あなたのswitchToImg()関数に無名関数を渡しました。

代わりに、次のJS試してみてください。jsFiddleでテスト

$(function() { 
    $('#feature-links a').click(function() { 

     if ($(this).hasClass('a-active')) { 
      return false; 
     } else { 
      var image = $(this).attr('class'); 

      switchToImg(image); 
     } 
    }); 

    function switchToImg(image) { 
     $('#feature-image').fadeOut('300', function() { 
      $('#feature-image').css('background-image', 'url(images/main_' + image + '.jpg)'); 
      $('#feature-image').fadeIn('300'); 
     }); 
     $('#feature-links a.a-active').removeClass('a-active'); 
     $('#feature-links .' + image).addClass('a-active'); 
    }; 
}); 

を。

編集：.stop()への呼び出しを削除しましたが、不要であり、バグを導入しました。

Answer 2

$('#feature-links a .a-active')を$('#feature-links a.a-active')に変更してみてください。

aと.a-activeの間のスペースは、<の子孫を>のクラスa-activeと一致させることを意味します。

Answer 3

:notセレクタを使用すると、アクティブなクラスを除外できます。

$（ '＃機能-リンク：ない（.A-アクティブ）'）