如何一次添加一个类并删除先前添加的类

How to add one class at a time and remove previously added classes?

本文关键字：添加 删除 何一次 一个      更新时间：2023-09-26

如何只添加选中的类，而删除之前选中的其他类 ?

<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>

我想一次只添加一个类

你可以用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干杯!!

使用jQuery中的removeClass()函数

例如;

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

我理解你的问题有些困难，但我想我明白了它的要点。

假设你有以下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");
}

希望这是有帮助的!

可以这样编码!

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

我不确定你要添加类的元素的选择，但你可以使用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 item中的选项值传递类名。那么不需要额外的if条件。

<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);        
});

如果你想删除所有以前的类并添加一个新的，你可以使用jQuery的toggleClass函数

相关文章：