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

时间:2016-09-15 08:32:18

标签: javascript jquery html css

如何仅添加之前选择的选定的课程删除其他课程

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

我想一次只添加一个课程。

6 个答案:

答案 0 :(得分:0)

我不确定选择要添加类的元素,但是您可以使用stdlib.jar而不提供参数来删除所有以前应用的类到项目,然后在使用{添加类时{1}}

-Xcompile

我也可以建议直接从选择项中的选项值传递类名。如果条件不需要额外的。

addClass()

和jquery

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

答案 1 :(得分:0)

你可以用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欢呼!!

答案 2 :(得分:0)

如果您尝试删除所有以前的类并添加新类,则可以使用jQuery的toggleClass函数。

答案 3 :(得分:0)

在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  

答案 4 :(得分:0)

我很难理解你的问题,但我认为我得到了它的要点。

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

希望这有用!

答案 5 :(得分:0)

你可以用这种方式编码!

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