根据字段值设置文档准备好类

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>