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

时间：2017-09-20 13:52:33

标签： javascript jquery html css

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

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

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

8 个答案:

答案 0 :(得分：8)

＆＃13;
＆＃13; 
$(".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);
});
＆＃13; 
.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}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：8)

在这里，您可以再使用一个解决方案

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 :(得分：6)

＆＃13;
＆＃13; 
$('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");
    }
    

});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：5)

你需要观察你的选择的变化，并把你的代码放在这里：

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

这是一个完整的例子：

＆＃13;
＆＃13; 
$(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");
  }
  })
})
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：5)

由于您希望在选项更改时更改类，因此您应该听取change的{​​{1}}事件，如下所示。

select

＆＃13;
＆＃13; 
$('#paragraphSpaceOPtion').on('change', function() {
    var strUser = $(this).val(); //Get the choosen value
});
＆＃13; 
$(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");
    }
  });
});
＆＃13; 
.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;
}
＆＃13;
＆＃13;
＆＃13;

注意：我认为在您的情况下使用 <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建议：

＆＃13;
＆＃13; 
data-* attributes
＆＃13; 
$("#paragraphSpaceOPtion").on("change", function() {
  var _class = $(this).find(":selected").data('class');

  $(".content").attr('class', 'content '+_class);
}).change();
＆＃13; 
.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;
}
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：3)

您可以使用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>

答案 6 :(得分：2)

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

答案 7 :(得分：1)

你可以试试这个。

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