blocks|key|4695013|text|我以前遇到过这个问题，花了很多时间试图找出哪里出了问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4695014|我仍然不知道为什么switchClass有时不能工作，但我确实有一个变通方法：|4695015|替换|4695016|switchClass('circle','square');|code-block|syntax|javascript|4695017|使用|4695018|addClass('square').removeClass('circle');|4695019|希望这能有所帮助。|4695020|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

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:

Replace

<pre><code>switchClass('circle','square');
</code></pre>

with

<pre><code>addClass('square').removeClass('circle');
</code></pre>

Hope that helps.

blocks|key|3079732|text|$(function(){
+++$('#circle').click(function(){
++++++$('.circle').switchClass('circle',+'square',+'slow');
++++++$('.square').switchClass('square',+'circle',+'slow');
++++++return:+false
+++});++
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3079733|在本例中，单击#circle+Div，我将从所有对象中删除.circle类，并将其替换为.square类。如果不存在要删除的.circle类，则删除.square类并将其替换为.circle类。这是一种切换效果。|unstyled|3079734|如果您不想要切换，只需删除顶部或底部的。|3079735|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>$(function(){
 $('#circle').click(function(){
 $('.circle').switchClass('circle', 'square', 'slow');
 $('.square').switchClass('square', 'circle', 'slow');
 return: false
 }); 
});
</code></pre>

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.

If you do no want the toggle just remove the top or bottom one.

blocks|key|4695036|text|如果公共关系科|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4695037|4695038|+.switchClass不是一个函数|blockquote|4695039|4695040|4695041|检查代码中是否链接了effects.core.js|offset|length|style|BOLD|4695042|通过使用js导航器中的控制台检查，幸运的是它对我来说工作得很好:)|4695043|entityMap^0|0|0|0|0|0|A|F|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|S|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|T|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|U|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@$J|X|K|Y|L|M]]|9|@]|A|$]]|$1|N|3|O|5|6|7|Z|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|Q|$]]

if the prb is 

<blockquote>
 .switchClass is not a function
</blockquote>

check if you are link the effects.core.js in your code

check that by using the Console in your navigator for js, good luck it's work fine for me :)

blocks|key|772646|text|我猜你想要在两个类之间切换。如果是这样的话，你可以用toggleClass函数来做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|772647|+//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');|code-block|syntax|javascript|772648|这将同时切换'foo‘和'bar’。由于foo已经存在，它将删除它并添加bar。下一个调用栏将会出现，因此我将删除它并添加foo。诸若此类。|772649|如果有不清楚的地方，这里有一个jsfiddle示例：https://jsfiddle.net/09qs86kr/1/|offset|length|772650|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/09qs86kr/1/^0|0|0|0|Q|W|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

I am guessing you want to toggle between two classes. If that is the case you can do it with toggleClass function.

<pre><code> //first you start with one of the classes in html:
 &lt;div class="foo"&gt;&lt;/div&gt;
 //then in js you do:
 var element = ...;
 $(element).toggleClass('foo bar');
</code></pre>

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.

If something is not clear here is a jsfiddle example: <a href="https://jsfiddle.net/09qs86kr/1/" rel="nofollow noreferrer">https://jsfiddle.net/09qs86kr/1/</a>

blocks|key|772605|text|请检查您是否添加了jQueryUi文件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|772606|<script+type="text/javascript"+src="https://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>|code-block|syntax|javascript|772607|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

please check you are added the jQueryUi file

<pre><code>&lt;script type="text/javascript" src="https://code.jquery.com/ui/1.8.23/jquery-ui.min.js"&gt;&lt;/script&gt;
</code></pre>

blocks|key|3079857|text|我以前遇到过这个问题，但找不到解决方案。然后我使用toggleClass()来解决这个问题。示例如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3079858|如果一个元素在开头有类X，那么写：|3079859|$(element).toggleClass("Y");|code-block|syntax|javascript|3079860|这将添加类Y。如果您再次这样做，它将删除类Y。|3079861|参考：http://api.jquery.com/toggleclass/|offset|length|3079862|希望这能有所帮助。|3079863|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/toggleclass/^0|0|0|0|0|3|Y|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$M|13|N|14|1|15]]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

I faced this problem before but could not find the solution. Then I used toggleClass() to solve the problem. Here is the example:

If an element has class X at the beginning, then write:

<pre><code>$(element).toggleClass("Y");
</code></pre>

This will add class Y. If you do that again, it will remove class Y.

Reference: <a href="http://api.jquery.com/toggleclass/" rel="nofollow noreferrer">http://api.jquery.com/toggleclass/</a>

Hope that helps.

blocks|key|4695190|text|确保您正在使用的类没有任何重要的“！”属性。我已经投资并发现jquery+UI+switch类不适用于带有"!important“标签的属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|4695191|填充原因:考虑你以前的类的样式是“：0”，而你的新类的样式是“Padding100”。您已添加了100毫秒的switchClass持续时间。为此，jquery将在元素中添加样式，每隔1ms将填充增加"1“。但是，由于前面的类仍然存在于元素中，在10毫秒之后，“padding10”样式不会对UI产生影响。100ms后，jquery将执行removeClass("previousClass")和addClass("newClass")。这将导致UI中反映的样式立即发生变化。|4695192|这是我找到的解释。请让我知道你们对此的看法。|4695193|entityMap^0|I|1|0|H|64|0|0|M|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|K|$]]

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.

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.

This is the explanation I find-out. Please let me know what you guys think about this.

jQuery UI <code>switchClass()</code> method doesn't switch class, rather it performs some undesired animations and the class remains the same as the original one when I use <code>jquery.animate-enhanced.js</code> for hardware accelerated animations.
 
Any Idea about how can I fix it?

jQuery UI switchClass() method is not working properly

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

jQuery UI switchClass()方法不切换类，而是执行一些不需要的动画，当我使用jquery.animate-enhanced.js进行硬件加速动画时，类保持与原始类相同。你知道我怎么才能修复它吗？

问jQuery UI switchClass()方法工作不正常
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery UI switchClass()方法工作不正常EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery UI switchClass()方法工作不正常
EN