以前のユーザーのやりとりによって決定されたクラスをJqueryで削除しました

Question

私はHTML要素select#optionsを持っていますが、オプションの1つを選択すると、要素に動的にクラスが追加されますが、この要素に以前に追加されたクラスを削除し、選択されたオプションに従って新しいクラスを作成します。

実現すれば、クラスは常に追加されますが、追加されたクラスと同じです。あなたの助けのための

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

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

 
<div id="container" class="container default"></div>

感謝。

Answer 1

ただ、最後に追加されたクラスを追跡するための変数を追加し、新しいものを追加する前にそれを削除してください。

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"> 
 
\t <option value="" selected>Select</option> 
 
\t <option value="style1">Style 1</option> 
 
\t <option value="style2">Style 2</option> 
 
\t <option value="style3">Style 3</option> 
 
\t <option value="style4">Style 4</option> 
 
\t <option value="style5">Style 5</option> 
 
</select> \t 
 

 
<div id="container" class="container default"></div>

複数のセレクタ/ラベルを追跡する必要がある場合は、div要素のデータ属性として、以前のクラスを格納することができます。

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

Answer 2

クラスを削除します。追加した名前のレコードを保持するか、それが必要な場合はすべて削除します。

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

Answer 3

あなたは、新鮮なクラスを毎回追加したい場合は、あなたがあなたのdivのクラス属性を設定することによってそれを行うことができます。削除するクラス

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

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

 
<div id="container" class="container default"></div>