Как добавить один класс за раз и удалить ранее добавленные классы?

Как добавить только выбранный класс и удалить другой класс который выбран еще?Как добавить один класс за раз и удалить ранее добавленные классы?

<html> 
    <select name="Button-Style" id="Button-Style" style="width:100%;"> 

    <option value="Sun-Flower">Sun Flower</option> 
    <option value="orange-flat">orange-flat</option> 


    </select> 


    <script> 
    $(document).ready(function(){ 
     $('#Button-Style').change(function(){ 
      if($(this).val() == 'sun-flower'){ 
      $("#$id>input").addClass('sun-flower-button'); 
       } 
      else if($(this).val() == 'orange-flat'){ 
      $("#" + id).addClass('orange-flat-button'); 
       } 



      else{ 

       } 
     }); 
    }); 
    </script> 
</html>

Я хочу добавить только один класс за раз.

источник

2016-09-15 komal

Не могли бы вы подробнее рассказать о своей porpouse и показать пример? – Mohammad

что такое '' id' *? – vivekkupadhyay

Возможный дубликат [Удалить все классы, кроме одного] (http: // stackoverflow.com/questions/5363289/remove-all-classes-except-one) – Abhitalks

Я не уверен в выборе элемента, на который вы добавляете класс, но вы можете использовать removeClass() без подачи параметра функционировать, чтобы удалить все выбранные ранее класс элемента, а затем добавить свой класс, как вы делаете с помощью addClass()

if($(this).val() == 'sun-flower'){ 
     $("#$id>input").removeClass(); // Remove all classes .. although please check selector 
     $("#$id>input").addClass('sun-flower-button'); 
     } 
      else if($(this).val() == 'orange-flat'){ 
       $("#" + id).removeClass(); 
      $("#" + id).addClass('orange-flat-button'); 
       }

Также я могу предложить передать имя класса непосредственно из значений параметра в элементе select. Тогда нет необходимости в дополнительном условии.

<select name="Button-Style" id="Button-Style" style="width:100%;"> 
    <option value="Sun-Flower-button">Sun Flower</option> 
    <option value="orange-flat-button">orange-flat</option> 
</select>

и в JQuery

$('#Button-Style').change(function(){ 
    var className = $(this).val(); 
    $('#inputElement').removeClass(); 
    $('#inputElement').addClass(className);   
});

источник

2016-09-15 08:36:08

Это правильный ответ, см. [здесь] (http://stackoverflow.com/a/1424991/3274964). – roberto06

почему отрицательный голос –

roberto06 спасибо так много это исправно. – komal

Вы можете сделать это, как это с JQuery.

  $('.selected_check').change(function() { 

       if ($(this).is(":checked")) { 
        var x = $(this).closest('tr').prop('id'); 
        var id = "#" + x; 
        $(id).removeClass('td_bgcolor'); 
        $(id).addClass('highlight_row'); 
       } else { 
        var y = $(this).closest('tr').prop('id'); 
        var id = "#" + y; 
        $(id).removeClass('highlight_row'); 
        $(id).addClass('td_bgcolor'); 
       } 

      });

просто используйте removeClass и addClass cheers !!

источник

2016-09-15 08:36:58

Если вы пытаетесь удалить все предыдущие классы и добавить новый, вы можете использовать функцию jQuery toggleClass.

источник

2016-09-15 08:36:59

Используйте функцию removeClass() в jQuery.

Как например;

HTML:

<div id="adiv" class="1st-class"></div>

Теперь JQuery;

$("#adiv").addClass("2nd-div");    // This 'll add 2nd-class with the div 

$("#adiv").removeClass("1st-div");   //This 'll remove the 1st-class from the div.

Теперь, если вы хотите удалить все предыдущие добавленные классы, просто выполните;

$("#adiv").removeClass();     //removeClass without any argument removes all class

источник

2016-09-15 08:39:59

У меня возникли трудности с пониманием вашего вопроса, но я думаю, что получаю его суть.

Допустим, вы имеете следующий HTML:

<div class="menu"> 
    <div class="menu--option">Option 1</div> 
    <div class="menu--option">Option 2</div> 
    <div class="menu--option">Option 3</div> 
</div>

Всякий раз, когда кто-то нажимает на выбор, мы хотим, чтобы добавить класс s-active к нему, а убедившись, что это только один с этим классом. Вы хотите сделать что-то вроде этого:

// First, we listen to the click event. 
$("menu--option").click(function() { 

    // When it fires, we select all of the menu options, 
    // and iterate over them, removing '.s-active' from it 
    // if the element has the class. 
    $("menu--option").each(function() { 
    $(this).removeClass("s-active"); 
    }); 

    // Finally, we add '.s-active' to the element that was clicked. 
    $(this).addClass("s-active"); 
}

Надеюсь, это было полезно!

источник

2016-09-15 08:41:56 AsLittleDesign

Вы можете запрограммировать его таким образом!

$('#Button-Style').change(function(){ 
$(this).removeClass(); 
if($(this).val()=="your_option_value"){ 
$(this).addClass("new_class");} 
}

источник

2016-09-15 08:42:24

Как добавить один класс за раз и удалить ранее добавленные классы?

ответ

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