jQuery UI switchClass () yöntemi düzgün çalışmıyor

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
Sorunu çoğaltan bir jsfiddle gönderir misiniz?
katma yazar Connor, kaynak
ve neden düzgün çalışmıyor? "düzgün çalışmıyor" davranışını açıklayabilir misiniz?
katma yazar Poelinca Dorin, kaynak
Tarayıcıda, tarayıcı hata ayıklayıcı (F12) üzerindeki ağlar sekmesine gidin ve CSS ve js'yi yüklemeyi başardığından emin olun. değilse, href'in başında http ekleyin
katma yazar Hesham Yassin, kaynak
dersi değiştirmez. İstenmeyen bir animasyondan sonra, sınıf aynı kalır.
katma yazar Devashish Dixit, kaynak

7 cevap

Bu problemle daha önce karşılaştım ve neyin yanlış gittiğini anlamaya çalışırken çok zaman harcadım.

Neden switchClass'ın neden çalışmadığını bilmiyorum, ancak bir çözümüm var:

değiştirmek

switchClass('circle','square');

ile

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

Umarım yardımcı olur.

23
katma
SwitchClass yöntemi ile kesinlikle problemler vardır. Benim için etkili olmak için yaklaşık bir saniye sürüyor. Neyse ki çözümün işe yarıyor :)
katma yazar Satbir Kira, kaynak

eğer prb ise

.switchClass bir işlev değil

kodunuzda effects.core.js bağlantısını kontrol edip etmediğinizi kontrol edin

js için yönlendiricinizdeki Konsolu kullanarak, iyi şanslar benim için iyi çalışıyor :)

2
katma
katma yazar Abdelouahab, kaynak
evet zaten biliyorum, ama bir göz atın: http://api.jqueryui.com/category/effects-core "Function.js tarafından sağlanan işlevsellik. Aşağıda listelenen yöntemlere ek olarak, effect.js de birkaç kolaylaştırma içerir."
katma yazar Yassine Sedrani, kaynak
$(function(){
   $('#circle').click(function(){
      $('.circle').switchClass('circle', 'square', 'slow');
      $('.square').switchClass('square', 'circle', 'slow');
      return: false
   });  
});

Bu örnekte #circle Div tıklaması ile .circle sınıfını tüm nesnelerden alıp .square sınıfıyla değiştiriyorum. Eğer .circle sınıfı kaldırılacak değilse o zaman .square sınıfı kaldırılır ve .circle sınıfı ile değiştirilir. Bu bir geçiş etkisidir.

Tetiklemeyi istemezseniz, üst veya alt olanı kaldırmanız yeterlidir.

2
katma

Lütfen jQueryUi dosyasını eklediğinizi kontrol edin

<script type="text/javascript" src="https://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
1
katma

Bu problemle daha önce karşılaştım ama çözümü bulamadım. Sonra sorunu çözmek için toggleClass() kullandım. İşte örnek:

Bir elemanın başında X sınıfı varsa, şunu yazın:

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

Bu, Y sınıfı ekler. Bunu tekrar yaparsanız, Y sınıfını kaldıracaktır.

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

Umarım yardımcı olur.

0
katma

İki sınıf arasında geçiş yapmak istediğinizi tahmin ediyorum. Bu durumda, toggleClass işleviyle yapabilirsiniz.

 //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');

Bu hem "foo" hem de "bar" ı değiştirir. Foo zaten mevcut olduğundan, onu kaldıracak ve çubuk ekleyecektir. Bir sonraki çağrı çubuğunda mevcut olacak, böylece onu kaldıracağım ve foo ekleyeceğim. Ve bunun gibi.

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

0
katma

Kullandığınız sınıfların "önemli" özelliklerinin olmadığından emin olun. Yatırım yaptık ve jQuery UI switch sınıfının "!" Etiketli özelliklere sahip olmadığına karar verdim.

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.

Bu keşfettiğim açıklama. Lütfen bunun hakkında ne düşündüğünüzü bana bildirin.

0
katma