classがついてもif文が反応しない

Question

現在、特定のclassが付いたら処理を無効にするようにしたいのですが、うまくいきません。
ul.nav-listにactiveがなかったら処理を実行して、それ以外では実行しないようにしたいのですが、ul.nav-listにactiveが付いた状態でも処理が実行されてしまいます。

ちなみに、activeはボタンを押すと追加される仕組みになっています。

$(function(){
	$('.business-list').css('display','none');
	$('.nav-list .business.animated').removeClass('animated');
	if(!$('ul.nav-list').hasClass('active')){
		$('.nav-list .business , .business-list').hover(function(){
			$('.business-list').stop().slideDown();
			$('.nav-list .business').addClass('animated');
		},function(){
			$('.business-list').stop().slideUp();
			$('.nav-list .business').removeClass('animated');
		});
	}
});

どのようにすれば、activeが付いた状態では処理が実行されないようになるのでしょうか？

よろしくお願いいたします。

Answer 1

対象のHTMLを分けて作ることで解決しました。みなさま、ご回答ありがとうございました。

Answer 2

都度判定してください。

    $('.nav-list .business , .business-list').hover(function() {
        if (!$('ul.nav-list').hasClass('active')) {

ボタンで無効になるとわかっているなら .off() としてもいいかもしれません。

    $('button').on('click', function(event) {
        $('ul.nav-list').addClass('active');
        $('.nav-list .business , .business-list').off();
    });

https://api.jquery.com/off/

Answer 3

lengthで評価してみればどうでしょうか？

    if(!$('ul.active').length){

Answer 4

普通にhasClassで判断できるはずです

Comments

[yambejp]

<script>
$(function(){
if(!$('#a1').hasClass('active')){
$('#b1').css({color:"red"});
}
if($('#a1').hasClass('active')){
$('#b1').css({color:"red"});
}
if(!$('#a2').hasClass('active')){
$('#b2').css({backgroundColor:"yellow"});
}
if($('#a2').hasClass('active')){
$('#b2').css({backgroundColor:"yellow"});
}
});
</script>
<div id="a1" class="active">a1</div>
<div id="a2">a2</div>
<div id="b1">b1</div>
<div id="b2">b2</div>

[TakenokoTaro]

hasClassで反応すると思っていたのですが、読み込み後にボタンをクリックして追加されたactiveに反応しないようです。

[yambejp]

＞ 追加されたactiveに反応

それはだめでしょうね
こんな感じで上位のDOMから処理をするとよいです
<script>
$(function(){
$(document).on({
mouseover:function(){
$('#b').css({color:'red'});
},
mouseout:function(){
$('#b').css({color:''});
}
},'#a');
});
</script>
<div id="a">a</div>
<div id="b">b</div>

[TakenokoTaro]

すみません、下記に追加するとどのような形になりますでしょうか？
$(function(){
$('.business-list').css('display','none');
$('.nav-list .business.animated').removeClass('animated');
if(!$('ul.nav-list').hasClass('active')){
$('.nav-list .business , .business-list').hover(function(){
$('.business-list').stop().slideDown();
$('.nav-list .business').addClass('animated');
},function(){
$('.business-list').stop().slideUp();
$('.nav-list .business').removeClass('animated');
});
}
});

お手数をおかけしますがよろしくお願いいたします。

[yambejp]

文書構造がわからないのでなんとも言えませんが
検証しないでざっくりかくと
$(function(){
$(document).on({
mouseover:function(){
if(!$('ul.nav-list').hasClass('active')){
$('.business-list').stop().slideDown();
$('.nav-list .business').addClass('animated');
}
},
mouseout:function(){
if(!$('ul.nav-list').hasClass('active')){
$('.business-list').stop().slideUp();
$('.nav-list .business').removeClass('animated');
}
},
},'.nav-list .business , .business-list');
});

たぶんトグル処理でもっと簡単にかける気はします

[TakenokoTaro]

ありがとうございます。
ただ、スマホ版で見るとまだ反応してしまうようです。。。

[yambejp]

具体的に動作するHTMLを記載ください
activeのつけ外しの部分も記載ください