选择选项时如何动态添加类 [英] How to dynamically add class when I select option
本文介绍了选择选项时如何动态添加类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想为这个选定的类动态添加类.
HTML:
这是我不想添加课程的内容:
<p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.时间，在！</p>JS:
$(document).ready(function(){var e = document.getElementById("paragraphSpaceOPtion");var strUser = e.options[e.selectedIndex].value;//console.log("选项编号" + 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");}})我不想在选择选项时动态添加类名.
解决方案
这里还有一个解决方案
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{ 颜色:蓝色}.content-07{ 颜色:绿色}.content-10{ 颜色:红色}.content-15{ 颜色:黄色}.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></选择><div class="内容"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.时间，在！</p>我使用了 ES6 模板文字，并使用了一个变量来保存之前选择的值.
希望对您有所帮助.
I want to dynamically add class for this selected class.
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>
Here is a content I wan't to add class:
<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");
}
})
I wan't to dynamically add class name when I select option.
解决方案
Here you go with one more solution
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>
I've used ES6 template literals and used a variable to hold the previous selected value.
Hope this will help you.
这篇关于选择选项时如何动态添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
