divがアクティブなクラスを持っている場合に関数を実行するelse jQueryで別の関数を実行する

Question

#selectedwhip divに.activeクラスがある場合、関数を実行できるif elseステートメントを取得しようとしています。そうでなければ、別の機能を実行したい。私はちょうどそれが動作するかどうかを見るためにコンソールを使用しましたが、それはコンソールでelse文を返します。

シナリオは、リンクとして機能する3つの画像です。リンクをクリックすると、別のdivにアクティブなクラスが追加されます。アクティブにすると、画像がdivに挿入されます。イメージをクリックすると、アクティブなクラスがdivに追加されますが、ifステートメントはコンソールに記録されません。

動作しないものがありますか？

jQueryの

$(".carbutton").click(function(){ 
     $("#selectedwhip").addClass("active"); 
    }); 

    $(function() { 
     if ($("#selectedwhip").hasClass("active")) { 
     console.log('active'); 
     } 
     else { 
     console.log('unactive'); 
     } 
    }); 

あなたのようなチェック機能を持っている必要がHTML

<div class="cars"> 
    <h1>Title</h1> 
    <div class="section group trio-cars"> 
     <div class="col span_1_of_3 carbutton" id="carbutton"> 
     <a id="car1"><img src="img/frontleftbmw.jpg" width="100%"></a> 
     </div> 
     <div class="col span_1_of_3 carbutton" id="carbutton"> 
     <a id="car2"><img src="http://placehold.it/350x150" width="100%"></a> 
     </div> 
     <div class="col span_1_of_3 carbutton" id="carbutton"> 
     <a id="car3"><img src="http://placehold.it/350x150" width="100%"></a> 
     </div> 
    </div> 
    </div> 

     <div class="col span_1_of_3"> 
     <div class="stats-image" id="selectedwhip"> 
     </div> 
     </div> 

Answer 1

：

function check() { 
    if ($("#selectedwhip").hasClass("active")) { 
    console.log('active'); 
    } else { 
    console.log('unactive'); 
    } 
} 

$(function() { 
    $(".carbutton").click(function() { 
    $("#selectedwhip").addClass("active"); 
    check(); 
    }); 
}); 

---

はちょうどあなたが重複したIDがcarbuttonとなりますことを持って気づきましたそれは無効なマークアップの作成すべてのIDは一意でなければなりません。

Answer 2

あなたは何をしたいのかを明確にする必要があります。すぐに関数を実行しているだけなので、すぐにページが用意されているので、上記のコードはページの最初の読み込み時にアクティブなクラスを持っているかどうかをチェックします。 この条件をイベントに添付する必要があります