jqueryif和else语句

我试图在jquery中创建一个if语句，但是我无法使它工作，我已经做了一个修改

也编码

HTML:

CSS:

试试这个

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

试试这个

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

---

您只需检查该类是否存在一次，每次单击后都要检查：

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

---

您只需检查该类是否存在一次，每次单击后都要检查：

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

---

如果

其他

添加类

删除类

则不需要

，您可以使用
切换类（）
-

如果

其他

添加类

移除类

则不需要

，您可以使用
切换类（）
-

试试这个：

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

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

试试这个：

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

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


工作示例

工作示例
我是否可以鼓励您大大简化代码：

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


.playlist播放器{高度：20px；宽度：20px；背景色：红色；}
.放大{背景色：蓝色；}
$（函数（）{
$（'.playlist player'）。单击（函数（）{
$（this.toggleClass（‘放大’）；
});
});



您需要样式和脚本标记中的css和js
您可以有一个默认的背景颜色样式：红色，可以被另一个类覆盖（放大）-不要忘记，您的覆盖类需要位于css中的默认类之后
您可以使用toggleClass而不是if/then语句
不要忘记将处理程序包装在
$（文档）中。准备好
（或
$（
在我的代码中）以确保在尝试附加处理程序时已加载
div

如果您希望用户在触发处理程序之前执行完全单击（这是按钮的常见行为），请使用
单击
处理程序（如果不是，您可以将我的示例中的
单击
替换为
鼠标向下
我是否可以鼓励您大大简化代码：

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


.playlist播放器{高度：20px；宽度：20px；背景色：红色；}
.放大{背景色：蓝色；}
$（函数（）{
$（'.playlist player'）。单击（函数（）{
$（this.toggleClass（‘放大’）；
});
});



您需要样式和脚本标记中的css和js
您可以有一个默认的背景颜色样式：红色，可以被另一个类覆盖（放大）-不要忘记，您的覆盖类需要位于css中的默认类之后
您可以使用toggleClass而不是if/then语句
不要忘记将处理程序包装在
$（文档）中。准备好
（或
$（
在我的代码中）以确保在尝试附加处理程序时已加载
div

如果您希望用户在触发处理程序之前执行完全单击（这是按钮的常见行为），请使用
单击
处理程序（如果不是，您可以将我的示例中的
单击
替换为
鼠标向下
你似乎弄乱了css和javascript，或者你应该适当地添加
style
和
script
标记。当页面加载时，你要检查元素是否有类
shrink
一次。然后你要分配一个点击处理程序，一次。你可能要分配处理程序，然后检查
hasClass
在处理程序内部。代码似乎执行了它试图执行的操作。当我单击JSFIDLE中的元素时，它会按预期将
收缩
类替换为
放大
类。它以什么方式对您不起作用？您似乎弄乱了css和javascript，或者您应该添加
样式
和
脚本
适当地标记当页面加载时，您正在检查元素是否有类
收缩
一次。然后您正在分配一个单击处理程序，一次。您可能想要分配处理程序，然后在处理程序内检查
hasClass
。代码似乎执行它试图执行的操作。当我在jsfidd中单击元素时le，它用
放大
类替换了
收缩
类。它对您不起作用的方式是什么？您甚至可以链接它：
$（这个）。toggleClass（'放大'）。toggleClass（'shrink'）；
@Brendanbulen更好：
$（这个）。toggleClass（“放大收缩”）
您甚至可以链接它：
$（这个）。toggleClass（‘放大’）.toggleClass（‘收缩’）；
@Brendanbulen更好：
$（这个）。toggleClass（“放大收缩”）
我看到你在分离代码。你可以忽略关于脚本/样式标记的第一点。我看到你在分离代码。你可以忽略关于脚本/样式标记+1的第一点。他的代码不是最漂亮的，但它确实能按预期工作。@PalashMondal我想人们没有意识到你可以一次切换多个类。+1表示正确答案+1他的代码不是最漂亮的，但它确实按照OP的要求工作。@PalashMondal我想人们没有意识到你可以一次切换多个类。+1表示正确答案
<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>