在文档就绪时设置类，具体取决于字段值

Question

我有一个页面，我需要在div中添加一个类，具体取决于字段值。此示例中的字段值是Select输入，但在实际场景中，它是我在document.getElementById找到的页面上返回的字段。

小提琴在这里https://jsfiddle.net/s3w3ocy8/3/

目前所选的选项/结果更改没有变化......

我已更新以下代码（感谢Praveen和Alexander）

非常感谢任何建议！

由于

CSS：

<style>
.active{color:red;background-color:blue;}
</style>

HTML：

<select id="select1">
<option>Select</option>
<option>Pill1</option>
<option>Pill2</option>
<option>Pill3</option>
</select>

<div id="pill1" class="pill1">
Pill 1
</div>
<div id="pill1Result">
result 1
</div>
<div id="pill2" class="pill2">
Pill 2
</div>
<div id="pill2Result">
result 2
</div>
<div id="pill3" class="pill3">
Pill 2
</div>
<div id="pill3Result">
result 3
</div>

JS：

<script>
$(document).ready(function($) {
var value = ('#select1');
switch ($(value).val()) {
    case "Pill1":
        $('#pill1,#pill1Result').addClass('active');
        break;
    case "Pill2":
        $('#pill2,#pill2Result').addClass('active');
        break;
    case "Pill3":
        $('#pill3,#pill3Result').addClass('active');
        break;
    default:
        $('.active').removeClass('active');
}
});
</script>

Answer 1

你到处都缺少$。用以下代码替换您的代码：

$(document).ready(function($) {
  var value = '#select1';
  if ($(value).val() == "Pill1")
    $('#pill1,#pill1Result').addClass('active');
  if ($(value).val() == "Pill2")
    $('#pill2,#pill2Result').addClass('active');
  if ($(value).val() == "Pill3")
    $('#pill3,#pill3Result').addClass('active');
  else
    $('#pill1,#pill2,#pill3,,#pill1Result,#pill2Result,#pill3Result').removeClass('active');
});

改进的代码看起来像：

$(document).ready(function($) {
  var value = '#select1';
  switch ($(value).val()) {
    case "Pill1":
      $('#pill1,#pill1Result').addClass('active');
      break;
    case "Pill2":
      $('#pill2,#pill2Result').addClass('active');
      break;
    case "Pill3":
      $('#pill3,#pill3Result').addClass('active');
      break;
    default:
      $('.active').removeClass('active');
  }
});

更新了工作代码段

$(document).ready(function() {
  var value = '#select1';
  $(value).change(function() {
    $('.active').removeClass('active');
    switch ($(this).val()) {
      case "Pill1":
        $('#pill1,#pill1Result').addClass('active');
        break;
      case "Pill2":
        $('#pill2,#pill2Result').addClass('active');
        break;
      case "Pill3":
        $('#pill3,#pill3Result').addClass('active');
        break;
      default:
        $('.active').removeClass('active');
    }
  });
});

.active {
  color: red;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
  <option>Select</option>
  <option>Pill1</option>
  <option>Pill2</option>
  <option>Pill3</option>
</select>

<div id="pill1" class="pill1">
  Pill 1
</div>
<div id="pill1Result">
  result 1
</div>
<div id="pill2" class="pill2">
  Pill 2
</div>
<div id="pill2Result">
  result 2
</div>
<div id="pill3" class="pill3">
  Pill 2
</div>
<div id="pill3Result">
  result 3
</div>