选择选项时如何动态添加类答案

【问题标题】：How to dynamically add class when I select option选择选项时如何动态添加类
【发布时间】：2021-06-25 21:14:52
【问题描述】：

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

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

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

【问题讨论】：

其他解决方案的问题是，当您第二次选择时，没有删除动态添加类的旧选项。检查我的解决方案
#Zakaria Acharki 你是对的...其他类没有删除

标签： javascript jquery html css

【解决方案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 模板字面量，并使用了一个变量来保存之前选择的值。

希望这会对你有所帮助。

【讨论】：

【解决方案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>

【讨论】：

$(this).find('option:selected').val() 可以缩短为 $(this).val()

【解决方案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>

【讨论】：

【解决方案4】：

你需要注意你的选择的变化，并将你的代码放在这个里面：

  $('#paragraphSpaceOPtion').change(function(){
       //your code here
  });

这是一个完整的例子：

$(document).ready(function(){

$("#paragraphSpaceOPtion").change(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);
  $(".content").attr('class','content');
  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");
  }
  })
})

<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>
here is a content i want to add class:

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

【讨论】：

也为了编程：而不是if(strUser == "10"){ $(".content").addClass("option-no-10"); }etc...做$(".content").addClass("option-no-"+strUser);如果需要验证

【解决方案5】：

由于您想在选择更改时更改类，因此您应该监听select 的change 事件，如下所示。

$('#paragraphSpaceOPtion').on('change', function() {
    var strUser = $(this).val(); //Get the choosen value
});

$(document).ready(function() {
  $('#paragraphSpaceOPtion').on('change', function() {
    var strUser = $(this).val();
    
    $(".content").attr('class','content');

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

.option-no-00{
   background-color: green;
}
.option-no-05{
   background-color: red;
}
.option-no-07{
   background-color: yellow;
}
.option-no-10{
   background-color: grey;
}
.option-no-15{
   background-color: blue;
}

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

注意：我认为在您的情况下使用 data-* attributes 会更好，请查看以下示例。

希望这会有所帮助。

data-* attributes 建议：

$("#paragraphSpaceOPtion").on("change", function() {
  var _class = $(this).find(":selected").data('class');

  $(".content").attr('class', 'content '+_class);
}).change();

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="number" id="paragraphSpaceOPtion">
    <option data-class="option-no-00" value="00">00</option>
    <option data-class="option-no-05" value="05">05</option>
    <option data-class="option-no-07" value="07">07</option>
    <option data-class="option-no-10" value="10">10</option>
    <option data-class="option-no-15" value="15">15</option>
    <option data-class="option-no-20" value="20">20</option>
</select>

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

【讨论】：

【解决方案6】：

您可以利用change 事件来完成此操作。

$('select#paragraphSpaceOPtion').change(function(){
  
  var className = "content option-no-" + $(this).val();
  
  $('.content').removeClass().addClass(className); // remove existing classes and add required classes.
 
  });

.option-no-00{
background:#990000;
}

.option-no-05{
background:#999900;
}

.option-no-07{
background:#990099;
}

.option-no-10{
background:#009900;
}

.option-no-05{
background:#990033;
}
.option-no-20{
background:#338822;
}

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

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

【讨论】：

【解决方案7】：

纯 JS 解决方案怎么样？这里有一个针对 JS 爱好者的无依赖解决方案：

var selector = document.querySelector("#paragraphSpaceOPtion");
var oldClass=""; // define variable for previously selected class which is blank by default
//
selector.addEventListener("change", select);
   
function select() {

var content = document.querySelector(".content");

var newClass= "option-no-" + this.value;

if (oldClass){ //check if oldClass exists
content.classList.remove(oldClass); // remove the old class selected previously if any
}

content.classList.add(newClass); // add the selected class

oldClass = newClass; // newClass is going to be old class for the next select change

}

.option-no-00{
color:#990000;
}

.option-no-05{
color:#993388;
}

.option-no-07{
color:#990099;
}

.option-no-10{
color:#339955;
}

.option-no-05{
color:#990033;
}
.option-no-20{
color:#338822;
}

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

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

【讨论】：

【解决方案8】：

你可以试试这个。

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

【讨论】：