jquery - Jquery Ifおよびelseステートメント

Question

jqueryでifステートメントを作成しようとしていますが、それを機能させることができません .jsフィドルを作成しました

コードも

HTML:

<div class="playlist-player shrink"></div>

Javascript:

if($('.playlist-player').hasClass('shrink')) {
    $(".playlist-player").mousedown(function(){
        $(".playlist-player").addClass("enlarge").removeClass("shrink");
    });
} else {
    $(".playlist-player").mousedown(function(){
        $(".playlist-player").addClass("shrink").removeClass("enlarge");
    });
}

CSS:

.shrink {background-color:red;}
.enlarge {background-color:blue;}
.playlist-player {height:20px; width:20px;}

Answer 1

You don't need if else addClass removeClass You can do that with toggleClass() -

$(".playlist-player").mousedown(function () {
   $(this).toggleClass("enlarge").toggleClass("shrink");
});

http://jsfiddle.net/mohammadAdil/Uk67u/8/

Answer 2

これを試して

$(".playlist-player").mousedown(function(){
    if ($('.playlist-player').hasClass('shrink')) {
        $(".playlist-player").addClass("enlarge").removeClass("shrink");}
    else {        
        $(".playlist-player").addClass("shrink").removeClass("enlarge");}
}

Answer 3

$(".playlist-player").mousedown(function(){
    if($(this).hasClass("shrink")){
        $(this).addClass("enlarge").removeClass("shrink");
    }else{
        $(this).addClass("shrink").removeClass("enlarge");
    }
});

Working Example http://jsfiddle.net/Uk67u/4/

Answer 4

You're only checking if it has the class once, you want to check after each click:

$('.playlist-player').mousedown(function() {
    if ($(this).hasClass('shrink')
        $(".playlist-player").addClass("enlarge").removeClass("shrink");
    else 
        $(".playlist-player").addClass("shrink").removeClass("enlarge");
}

Answer 5

Try this:

$(".playlist-player").mousedown(function () {
    $(this).toggleClass("enlarge shrink");

    // You can also check the console for class
    console.log($(this).attr('class'));
});

WORKING FIDDLE