javascript jQuery UI switchClass() 方法无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7925994/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI switchClass() method is not working properly
提问by Devashish Dixit
jQuery UI switchClass()method doesn't switch class, rather it performs some undesired animations and the class remains the same as the original one when I use jquery.animate-enhanced.jsfor hardware accelerated animations.
Any Idea about how can I fix it?
jQuery UIswitchClass()方法不会切换类，而是执行一些不需要的动画，并且当我jquery.animate-enhanced.js用于硬件加速动画时，该类与原始类保持相同。
关于如何修复它的任何想法？
回答by bergie3000
I have encountered this problem before and wasted many hours trying to figure out what was going wrong.
我以前遇到过这个问题，浪费了很多时间试图找出出了什么问题。
I still don't know why switchClass sometimes doesn't work, but I do have a workaround:
我仍然不知道为什么 switchClass 有时不起作用，但我有一个解决方法：
Replace
代替
switchClass('circle','square');
with
和
addClass('square').removeClass('circle');
Hope that helps.
希望有帮助。
回答by Jacob9706
$(function(){
$('#circle').click(function(){
$('.circle').switchClass('circle', 'square', 'slow');
$('.square').switchClass('square', 'circle', 'slow');
return: false
});
});
In this Example on the click of the #circle Div I am removing the .circle class from all objects and replacing it with the .square class. If the .circle class is not there to be removed then the .square class is removed and replaced with the .circle class. It is a toggle effect.
在此示例中，单击 #circle Div，我将从所有对象中删除 .circle 类并将其替换为 .square 类。如果 .circle 类不在那里被删除，那么 .square 类将被删除并替换为 .circle 类。这是一个切换效果。
If you do no want the toggle just remove the top or bottom one.
如果您不想要切换，只需移除顶部或底部的切换。
回答by Bojidar Stanchev
I am guessing you want to toggle between two classes. If that is the case you can do it with toggleClass function.
我猜你想在两个类之间切换。如果是这种情况，您可以使用 toggleClass 函数来完成。
//first you start with one of the classes in html:
<div class="foo"></div>
//then in js you do:
var element = ...;
$(element).toggleClass('foo bar');
This will toggle both 'foo' and 'bar'. Since foo is already present it will remove it and add bar. On the next call bar will be present so i will remove it and add foo. And so on.
这将同时切换 'foo' 和 'bar'。由于 foo 已经存在，它将删除它并添加 bar。在下一个调用栏将出现，所以我将删除它并添加 foo。等等。
If something is not clear here is a jsfiddle example: https://jsfiddle.net/09qs86kr/1/
如果这里有不清楚的地方是一个 jsfiddle 示例：https://jsfiddle.net/09qs86kr/1/
回答by Yassine Sedrani
if the prb is
如果prb是
.switchClass is not a function
.switchClass 不是函数
check if you are link the effects.core.jsin your code
检查您是否在代码中链接了effects.core.js
check that by using the Console in your navigator for js, good luck it's work fine for me :)
通过在导航器中使用控制台来检查 js，祝你好运，它对我来说很好:)
回答by arsh
please check you are added the jQueryUi file
请检查您是否添加了 jQueryUi 文件
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
回答by Ismail Rubad
I faced this problem before but could not find the solution. Then I used toggleClass() to solve the problem. Here is the example:
我以前遇到过这个问题，但找不到解决方案。然后我使用toggleClass()来解决这个问题。这是示例：
If an element has class X at the beginning, then write:
如果一个元素的开头有类 X，那么写：
$(element).toggleClass("Y");
This will add class Y. If you do that again, it will remove class Y.
这将添加 Y 类。如果您再次这样做，它将删除 Y 类。
Reference: http://api.jquery.com/toggleclass/
参考：http: //api.jquery.com/toggleclass/
Hope that helps.
希望有帮助。
回答by ARNAB PRADHAN
Make sure the classes you are using doesn't have any "!important"properties. I have invested and found that jquery UI switch class doesn't work for properties with "!important" tags.
确保您使用的类没有任何“!important”属性。我已经投资并发现 jquery UI 开关类不适用于带有“！important”标签的属性。
Reason :Consider that your previous class had style "padding : 0" and your new class has "padding:100". You have added switchClass duration for 100 ms. What jquery will do for this is, it will add a style to your element by increasing padding by "1" in every 1 ms. But, as the previous class is still there in the element with a "padding : 0 !important", after 10 ms, "padding : 10" style added by jquery doesn't effect the UI. After 100 ms, jquery will execute removeClass("previousClass") and addClass("newClass"). this will result to a instant change in style reflected in the UI.
原因：考虑到您以前的班级的样式为“padding:0”，而您的新班级的样式为“padding:100”。您已添加 100 毫秒的 switchClass 持续时间。jquery 会为此做的是，它会通过每 1 毫秒将填充增加“1”来为您的元素添加样式。但是，由于前一个类仍然存在于具有“padding : 0 !important”的元素中，因此在 10 毫秒后，jquery 添加的“padding : 10”样式不会影响 UI。100 毫秒后，jquery 将执行 removeClass("previousClass") 和 addClass("newClass")。这将导致 UI 中反映的样式立即发生变化。
This is the explanation I find-out. Please let me know what you guys think about this.
这是我查到的解释。请让我知道你们对此有何看法。
