jQuery UIのswitchClass()メソッドが正しく動作しない

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.js for hardware accelerated animations.
Any Idea about how can I fix it?

7
問題を再現するjsfiddleを投稿できますか?
追加された 著者 Connor,
それはなぜ正しく動作していないのですか?あなたは "適切に動作していない"動作を少なくとも説明できますか?
追加された 著者 Poelinca Dorin,
ブラウザで、ブラウザデバッガ(F12)の[ネットワーク]タブに移動し、cssとjsの読み込みに成功したことを確認します。そうでない場合は、hrefの先頭にhttpを追加します
追加された 著者 Hesham Yassin,
クラスを切り替えることはありません。いくつかの望ましくないアニメーションの後、クラスは同じままです。
追加された 著者 Devashish Dixit,

7 答え

私は前にこの問題に遭遇し、何がうまくいかないのか理解しようと多くの時間を無駄にしました。

switchClassが動作しないことがあるのはまだ分かりませんが、回避策があります:

置換

switchClass('circle','square');

〜と

addClass('square').removeClass('circle');

希望が役立ちます。

23
追加された
間違いなくswitchClassメソッドに問題があります。私のためには、有効にするのに約2秒かかります。幸いにも、あなたのソリューションは動作します:)
追加された 著者 Satbir Kira,

prbが

.switchClassは関数ではありません

コード内の effects.core.js をリンクしているかどうかを確認してください

jsのためにあなたのナビゲータのコンソールを使って確認してください、それは私にとってはうまく動作します:)

2
追加された
それはここにあります api.jqueryui.com/switchclass
追加された 著者 Abdelouahab,
はい、私はすでに知っているが、一見: http://api.jqueryui.com/category/effects-core "effect.jsによって提供される機能effect.jsには、下記のメソッドに加えて、いくつかのイージングが含まれています。
追加された 著者 Yassine Sedrani,
$(function(){
   $('#circle').click(function(){
      $('.circle').switchClass('circle', 'square', 'slow');
      $('.square').switchClass('square', 'circle', 'slow');
      return: false
   });  
});

この例では、#circle Divのクリックで、すべてのオブジェクトから.circleクラスを削除し、それを.squareクラスに置き換えています。 .circleクラスが削除されない場合、.squareクラスは削除され、.circleクラスに置き換えられます。これはトグル効果です。

あなたがトグルをしたくない場合は、トップまたはボトムを外してください。

2
追加された

jQueryUiファイルが追加されていることを確認してください

<script type="text/javascript" src="https://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
1
追加された

私は以前この問題に直面していましたが、解決策を見つけることができませんでした。次に、問題を解決するためにtoggleClass()を使用しました。次に例を示します。

要素の先頭にクラスXがある場合は、次のように記述します。

$(element).toggleClass("Y");

これにより、クラスYが追加されます。これを再度行うと、クラスYが削除されます。

Reference: http://api.jquery.com/toggleclass/

希望が役立ちます。

0
追加された

私はあなたが2つのクラスの間でトグルしたいと思っています。その場合は、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');

これは 'foo'と 'bar'の両方を切り替えます。 fooはすでに存在するので、それを削除してbarを追加します。次のコールバーが表示されますので、削除してfooを追加します。等々。

If something is not clear here is a jsfiddle example: https://jsfiddle.net/09qs86kr/1/

0
追加された

使用しているクラスに重要なプロパティがないことを確認してください。 私は投資して、jqueryのUIスイッチクラスが "重要な"タグを持つプロパティに対して機能しないことを発見しました。

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.

これは私が見つけ出す説明です。皆さんがこれについて何を考えているか教えてください。

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript