jquery - Jquery If 和 else 语句

Question

我试图在 jquery 中创建一个 if 语句，但我无法让它工作我做了一个 js fiddle

也编码

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;}

score 3 · Accepted Answer

你不需要if else addClass removeClass你可以这样做toggleClass()-

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

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

score 1 · Accepted Answer

尝试这个

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

score 1 · Accepted Answer

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

工作示例 http://jsfiddle.net/Uk67u/4/

score 1 · Accepted Answer

我可以鼓励你大大简化你的代码：

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

<style type="text/css">
    .playlist-player {height:20px; width:20px;background-color:red;}
    .enlarge {background-color:blue;}
</style>

<script type="text/javascript">
    $(function() {
        $('.playlist-player').click(function(){
            $(this).toggleClass('enlarge');
        });
    });
</script>

这是jsfiddle

您将需要样式和脚本标签中的 css 和 js。
您可以有一个默认样式的背景颜色：红色，可以用另一个类（放大）覆盖 -不要忘记您的覆盖类需要在 css 中的默认类之后
您可以使用 toggleClass 而不是 if/then 语句
不要忘记将您的处理程序包装在 a $(document).ready（或$(我的代码中）以确保div在您尝试附加处理程序时已加载
如果您希望用户在触发处理程序之前执行完全点击（这是按钮的常见行为），请使用click处理程序（如果不是，您可以click在我的示例中替换为mousedown

score 0 · Accepted Answer

你只检查它是否有一次，你想在每次点击后检查：

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

score 0 · Accepted Answer

尝试这个：

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

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

工作小提琴

jquery - Jquery If 和 else 语句

6 回答 6

Related

Reference