jQuery if/else hasClass（else not working）

我试图学习如果其他语句与jQuery和hasClass。我做了一个简单的测试，不会工作，我不知道为什么。jQuery if/else hasClass（else not working）

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

来源

2017-08-16 Dale Spiteri

执行'if'逻辑*单*事件的内部处理程序和噗噗，那就是你的问题！ –

注册新的点击处理程序注销以前的点击吗？如果不是这样，那么这两个处理程序可能会立即开始互相取消。 – Carcigenicate

你做你检查前点击，然后处理程序总是做同样的事情。

你想要做你的支票在处理程序：

$('.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'); 
    } 
});

来源

2017-08-16 16:38:14

你的逻辑在里面：你应该绑定click事件一次，然后在回调函数内评估if/else条件。

您的当前代码将仅绑定两个单击事件之一，因为hasClass()语句在运行时进行评估。

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

来源

2017-08-16 16:38:15 Terry

-1

你需要把你的 “如果” 语句中的 “点击” 处理程序中：

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

来源

2017-08-16 16:48:09 Yeedub

jQuery if/else hasClass（else not working）

回答

相关问题