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

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

$(".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 2

在这里,您将再提供一个解决方案

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

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

Answer 5

由于您希望在选择更改时更改类,因此您应该听取下面显示的示例change事件select.

$('#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>