Как добавить и удалить классы в jq?

-5

Привет, пожалуйста, решите мою проблему. Ищите часы, но не нашли правильного и рабочего решения, поэтому я решил опубликовать его здесь.Как добавить и удалить классы в jq?

Вот HTML

<body> 
    <div id="first"> 
      <img src="Untitled-1.png" width="300px" height="300px"> 
      <img src="Untitled-1.png" width="300px" height="300px"> <br> 
      <button id="start" >START</button> 
      <button id="stop">STOP</button> 
      <button id="slow" >SLOW</button> 
      <button id="fast" >FAST</button> 
    </div>  
</body>

вот мой CSS:

<style> 
.anim{  
    animation-name:test; 
    animation-delay:0s; 
    animation-direction:normal; 
    animation-timing-function:linear; 
    animation-duration:500ms; 
    animation-iteration-count:infinite;  
    } 
    .slow{  
    animation-name:test; 
    animation-delay:0s; 
    animation-direction:normal; 
    animation-timing-function:linear; 
    animation-duration:1500ms; 
    animation-iteration-count:infinite;  
    } 
    .fast{  
    animation-name:test; 
    animation-delay:0s; 
    animation-direction:normal; 
    animation-timing-function:linear; 
    animation-duration:200ms; 
    animation-iteration-count:infinite; 
} 

@keyframes test{ 
    0%{transform:rotateZ(0deg);} 
    50%{transform:rotateZ(180deg);} 
    100%{transform:rotateZ(360deg);} 
} 
</style>

Вот JQuery:

$(document).ready(function(){ 
     $('#first').on('click','#start',function(){ 
     $('img').addClass('anim'); 
     }); 

     $('#first').on('click','#stop',function(){ 
     $('img').removeClass(); 
     }); 

     $('#first').on('click','#slow',function(){ 
     $('img').removeClass().addClass('slow'); 

     }); 

     $('#first').on('click','#fast',function(){ 
     $('img').removeClass().addClass('fast'); 
     });  

});

Посмотрите на JQuery .. Я хочу изменить класс (в зависимости от того, что применяется) к другому классу в зависимости от нажатия кнопки. Если нажать «медленную» кнопку, существующий класс следует удалить и применить класс «.slow». Я пробовал все предлагаемые методы в Интернете и даже на этом форуме, но не работал. Я попробовал этот код, suggesties другими

$('#first').on('click','#slow',function(){ 
$('img').removeClass().addClass('slow');});

, но не работает.

источник

2014-10-07 Waqar Adil Mughal

@ entropic: Uhm * "Если в параметре не указаны имена классов, все классы будут удалены." *. Вы также должны прочитать документацию, а не просто найти ее;) –

да, я сделал. Я хочу удалить класс, который применяется не к определенному классу. Феликс Клинг согласился. –

Действительно? Вы говорите ему прочитать документ, когда он ясно показывает, что вы ошибаетесь? OP, когда я пытаюсь поместить это в jsfiddle, он работает так, как ожидалось. –

Наконец-то мне удалось решить эту проблему. На самом деле я использовал 'prefix-free.js', который неправильно кодировался для хром. Как только я изменил браузер и запустил этот код в firefox, он отлично работал. Из-за этого prefex-free.js я не применял -webkit- или -moz-. Хорошо Спасибо всем, кто участвовал.

EDITED: Извините, что префикс-free.js не имеет ничего общего с этой проблемой. Проблема была вызвана браузером CHROME. Я сообщил об этой проблеме разработчикам хром. Я надеюсь, что они разрешат этот вопрос на приоритетной основе.

источник

2014-10-07 18:44:04

Вы можете попытаться удалить классы с

$("img").removeAttr('class');

, а затем добавить новые классы с

$("img").attr('class', 'new-classes');

источник

2014-10-07 17:44:22 Monte

Почему вы предлагаете это? проблема с 'removeClass' и почему ваше решение поможет здесь? –

Это полезно, если вы не знаете, какие классы имеет элемент. – Monte

@Monte' .removeClass() 'будет удалять классы всех элементов. – Regent

Попробуйте

$(document).ready(function(){ 
    $('#first').on('click','#start',function(){ 
    $('img').addClass('anim'); 
    }); 

    $('#first').on('click','#stop',function(){ 
    $('img').removeClass(); 
    }); 

    $('#first').on('click','#slow',function(){ 
    $('img').removeClass().addClass('slow'); 

    }); 

    $('#first').on('click','#fast',function(){ 
    $('img').removeClass().addClass('fast'); 
    });

});

источник

2014-10-07 17:44:25

Извините, приятель! Не работает. –

Попробуйте этот код i chenged –

не беспокоясь bro @HarutyunAbgaryan –

Как добавить и удалить классы в jq?

ответ

Смежные вопросы