jQuery if/else hasClass（そうでなければ動作しません）

Question

私はjQueryとhasClassを使ってelse文を調べています。私はうまくいかない簡単なテストをしましたが、理由を理解できません。

if ($('.one').hasClass('left')) { 

    $('.button').click(function() { 
    $('.one').addClass('right'); 
    $('.one').removeClass('left'); 
    }) 

} else { 

    $('.button').click(function() { 
    $('.one').addClass('left'); 
    $('.one').removeClass('right'); 
    }) 

} 

私はChromeの開発ツールに行くと、ボタンの最初のクリックが正常に動作し、クラスが正しく切り替えられ、左が削除されたので、私は非常に困惑しています。私はなぜelse文がうまくいかないのか分かりません。私にはすべてが正しいように見えます。

Link to fiddle

Answer 1

あなたは前にクリックを小切手をやって、その後、ハンドラが常に同じことを行います。

あなたはにハンドラ小切手をしたい：

$('.button').click(function() { 
    if ($('.one').hasClass('left')) { 
     $('.one').addClass('right'); 
     $('.one').removeClass('left'); 
    } else { 
     $('.one').addClass('left'); 
     $('.one').removeClass('right'); 
    } 
}); 

あるいは、もちろん、toggleClassを使用するが、私はあなたがif/elseを勉強していること、それを取った...

---

サイドノート：私はそのように再クエリしません、私はセットを覚えて、それを連鎖と一緒に再利用するでしょう：

$('.button').click(function() { 
    var one = $('.one'); 
    if (one.hasClass('left')) { 
     one.addClass('right').removeClass('left'); 
    } else { 
     one.addClass('left').removeClass('right'); 
    } 
}); 

Answer 2

あなたのロジックは内部にあります：clickイベントを一度バインドし、コールバック関数内でif/else条件を評価する必要があります。

hasClass()ステートメントは実行時に評価されるため、現在のコードは2つのクリックイベントの1つのみをバインドします。

$(function() { 
 
$('.button').click(function() { 
 
    if ($('.one').hasClass('left')) { 
 
    $('.one').addClass('right').removeClass('left'); 
 
    } else { 
 
    $('.one').addClass('left').removeClass('right'); 
 
    } 
 
}); 
 
});

.one { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: relative; 
 
    transition: all 500ms; 
 
} 
 

 
.left { 
 
    left: 10px; 
 
} 
 

 
.right { 
 
    left: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="one left"></div> 
 
<button class="button">swap</button>

Answer 3

あなたは "クリック" ハンドラ内であなたの "if" ステートメントを配置する必要があります：

$('.button').click(function() { 
    if ($('.one').hasClass('left')) { 
    $('.one').addClass('right'); 
    $('.one').removeClass('left'); 
    } else { 
    $('.one').addClass('left'); 
    $('.one').removeClass('right'); 
    } 
})