如何在选择选项时动态添加类

Question

我想动态地为这个选定的类添加类。

HTML :

<select name="number" id="paragraphSpaceOPtion">
    <option class="option-1" value="00">00</option>
    <option class="option-2" value="05">05</option>
    <option class="option-3" value="07">07</option>
    <option class="option-4" value="10">10</option>
    <option class="option-5" value="15">15</option>
    <option class="option-6" value="20">20</option>
</select>

​

这里有一个我不想添加类的内容：

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, in!</p>
</div>

JS :

$(document).ready(function(){

    var e = document.getElementById("paragraphSpaceOPtion");
    var strUser = e.options[e.selectedIndex].value;
    //console.log("option number " + strUser);

    //var masud = typeof(strUser);
    //console.log(masud);
    if(strUser == "00"){
        $(".content").addClass("option-no-00");
    }
    if(strUser == "05"){
        $(".content").addClass("option-no-05");
    }
    if(strUser == "07"){
        $(".content").addClass("option-no-07");
    }
    if(strUser == "10"){
        $(".content").addClass("option-no-10");
    }
    if(strUser == "15"){
        $(".content").addClass("option-no-15");
    }
    if(strUser == "20"){
        $(".content").addClass("option-no-20");
    }
})

在选择选项时，我不想动态添加类名。

Answer 1

这里你还有一个解决方案

​

var prevVal;
$("#paragraphSpaceOPtion").on("change",function(){
  var val = $(this).find('option:selected').val();
  $(".content").removeClass(`content-${prevVal}`).addClass(`content-${val}`);
  prevVal = val;
});

.content-00{ color:pink}
.content-05{ color:blue}
.content-07{ color:green}
.content-10{ color:red}
.content-15{ color:yellow}
.content-20{ color:gray}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="number" id="paragraphSpaceOPtion">
  <option class="option-1" value="00">00</option>
  <option class="option-2" value="05">05</option>
  <option class="option-3" value="07">07</option>
  <option class="option-4" value="10">10</option>
  <option class="option-5" value="15">15</option>
  <option class="option-6" value="20">20</option>
</select>


<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, in!</p>
</div>

​

我使用了ES6模板文本，并使用一个变量来保存前面选定的值。

希望这能帮到你。

Answer 2

​

$(".content").removeClass().addClass("content option-no-"+$('#paragraphSpaceOPtion').find('option:selected').val());
$("#paragraphSpaceOPtion").on("change",function(){
  var val=$(this).find('option:selected').val();
  $(".content").removeClass().addClass("content option-no-"+val);
});

.option-no-00{ color:pink}
.option-no-05{ color:blue}
.option-no-07{ color:green}
.option-no-10{ color:red}
.option-no-15{ color:yellow}
.option-no-20{ color:gray}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="number" id="paragraphSpaceOPtion">
    <option selected class="option-1" value="00">00</option>
    <option class="option-2" value="05">05</option>
    <option class="option-3" value="07">07</option>
    <option class="option-4" value="10">10</option>
    <option class="option-5" value="15">15</option>
    <option class="option-6" value="20">20</option>
</select>


<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, in!</p>
</div>

​

Answer 3

​

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var strUser = this.value;

$("[class*='option-no']").removeClass (function (index, className) {
    return (className.match (/option-no.*/g) || []).join(' ');
});
    

    if(strUser == "00"){
        optionSelected.addClass("option-no-00");
    }
    if(strUser == "05"){
        optionSelected.addClass("option-no-05");
    }
    if(strUser == "07"){
        optionSelected.addClass("option-no-07");
    }
    if(strUser == "10"){
        optionSelected.addClass("option-no-10");
    }
    if(strUser == "15"){
        optionSelected.addClass("option-no-15");
    }
    if(strUser == "20"){
        optionSelected.addClass("option-no-20");
    }
    

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="paragarph-space-form" action="">
<select name="number" id="paragraphSpaceOPtion">
    <option class="option-1" value="00">00</option>
    <option class="option-2" value="05">05</option>
    <option class="option-3" value="07">07</option>
    <option class="option-4" value="10">10</option>
    <option class="option-5" value="15">15</option>
    <option class="option-6" value="20">20</option>
</select>

​