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

Answer 1

您不需要if else addClass removeClass您可以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");
    }
});

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

Answer 4

我可以鼓励您大大简化代码：

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

Here's the jsfiddle

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

Answer 5

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

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

Answer 6

试试这个：

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

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

WORKING FIDDLE

Jquery If和else语句

6 个答案: