Question

我有一个HTML元素select#options，在选择其中一个选项时会动态地将类添加到元素div#container，但是我需要删除之前添加到此元素的类然后添加根据所选选项的新课程。

如果他们意识到，这些类总是被添加但是，但它们仍然是添加的类。

＆＃13;

$(function(){
  $(document).on('change', 'select#options', function(){
    
    var option_selected = $(this).val();
    $('#container').addClass(option_selected);
    $('#container').html(option_selected);
    console.log($('#container').attr('class'));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
	<option value="" selected>Select</option>
	<option value="style1">Style 1</option>
	<option value="style2">Style 2</option>
	<option value="style3">Style 3</option>
	<option value="style4">Style 4</option>
	<option value="style5">Style 5</option>
</select>	

<div id="container" class="container default"></div>

＆＃13;

Answer 1

删除课程。要么保留您添加的名称的记录，要么将它们全部删除，如果这是您想要的。

https://api.jquery.com/removeclass/

Answer 2

只需添加一个变量即可跟踪最后添加的类，并在添加新类之前将其删除。

var previous_class = "";

$(function(){
  $(document).on('change', 'select#options', function(){
    
    var option_selected = $(this).val();
    $('#container').removeClass(previous_class);
    previous_class = option_selected;
    $('#container').addClass(option_selected);
    $('#container').html(option_selected);
    console.log($('#container').attr('class'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
	<option value="" selected>Select</option>
	<option value="style1">Style 1</option>
	<option value="style2">Style 2</option>
	<option value="style3">Style 3</option>
	<option value="style4">Style 4</option>
	<option value="style5">Style 5</option>
</select>	

<div id="container" class="container default"></div>

如果您需要跟踪多个选择器/标签，那么您可以将前一个类存储为div的数据属性。

$('#container').data('previous-class', option_selected);

Answer 3

如果您想每次添加一个新课程，可以通过为div设置属性类来实现。

＆＃13;

$(function(){
  $(document).on('change', 'select#options', function(){
    
    var option_selected = $(this).val();
    $('#container').attr("class", option_selected);
    $('#container').html(option_selected);
    console.log($('#container').attr('class'));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
	<option value="" selected>Select</option>
	<option value="style1">Style 1</option>
	<option value="style2">Style 2</option>
	<option value="style3">Style 3</option>
	<option value="style4">Style 4</option>
	<option value="style5">Style 5</option>
</select>	

<div id="container" class="container default"></div>

＆＃13;

jQuery删除由先前用户交互确定的类

3 个答案: