Метод switchClass () інтерфейсу користувача jQuery не працює належним чином

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. якщо ні, додайте http на початку href
додано Автор Hesham Yassin, джерело
це не перемикає клас. Після деякої небажаної анімації клас залишається таким же.
додано Автор Devashish Dixit, джерело

7 Відповіді

Я зіткнувся з цією проблемою раніше і витратив багато годин, намагаючись з'ясувати, що сталося не так.

Я ще не знаю, чому switchClass іноді не працює, але у мене є обхідний шлях:

Замініть

switchClass('circle','square');

з

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

Надія, що допомагає.

23
додано
Є певні проблеми з методом switchClass. Для мене це займає близько секунди, щоб набрати чинності. На щастя, твоє рішення працює :)
додано Автор Satbir Kira, джерело

якщо PRB є

.switchClass не є функцією

перевірте, чи є ви посиланням effects.core.js у своєму коді

Перевірте, що за допомогою консолі у навігаторі для JS, удачі, це добре працює для мене :)

2
додано
але це тут api.jqueryui.com/switchclass
додано Автор Abdelouahab, джерело
так, я вже знаю, але подивіться: http://api.jqueryui.com/category/effects-core "Функціональність, що надається eff.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 не буде видалений, клас .quare буде видалено та замінено класом .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
додано

Я гадаю, що хочете переключитися між двома класами. Якщо це так, ви можете зробити це за допомогою функції 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 вже присутній, він буде видалений і додано панель. На наступній панелі викликів буде присутня, тому я його видали і додам foo. І так далі.

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

0
додано

Переконайтеся, що в класах, які ви використовуєте, немає властивостей "! Важливого" . Я вклав та встановив, що клас перемикача інтерфейсу jQuery не працює для властивостей з "! Важливими" тегами.

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
504 учасників

співтовариство javascript розробників в Telegram