jquery - 使用 jQuery 更新带有下拉选择值的类

Question

我有一个包含一些可选类集的 div，我想使用下拉选择来切换这些类。据我所知，我编写了以下脚本，但它运行不正常。如果选择值为 null，它会抛出一个“未定义”值。如果你能解决这个问题，或者可以指导我使用 jQuery 实现我的目标，你将非常感谢

$(document).ready(function() {
  var ContainerClasses;
  var TxtColor;
  var BackGroundColor;

  // SWITCHING TEXT COLOR
  $("#TxtColor").change(function() {
    if ($(this).val()) {
      TxtColor = ' ' + $(this).val();
    } else {
      TxtColor = "";
    }
    upDateTheme();
  });

  // SWITCHING BACKGROUND COLOR	
  $("#BackGroundColor").change(function() {
    if ($(this).val()) {
      BackGroundColor = ' ' + $(this).val();
    } else {
      BackGroundColor = "";
    }
    upDateTheme();
  });

  function upDateTheme() {
    ContainerClasses = TxtColor + ' ' + BackGroundColor;
    $('#Main').addClass(ContainerClasses);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Main" class="">
  <!-- SOME HTML INSIDE -->
</div>
<div class="optionBox">
  <label>Text Color</label>
  <select id="TxtColor">
    <option value="">None</option>
    <option value="ClassA">Class A</option>
    <option value="ClassB">Class A</option>
  </select>
</div>
<div class="optionBox">
  <label>BackGround Color</label>
  <select id="BackGroundColor">
    <option value="">None</option>
    <option value="Class1">Class 1</option>
    <option value="Class2">Class 2</option>
  </select>
</div>

Answer 1

很简单。您的值是 undefined。因此，最初像下面这样定义空值。

 var ContainerClasses="";
 var TxtColor="";
 var BackGroundColor="";

我添加了一些 css 样式并创建了 fiddle 。检查DEMO

逻辑部分是在更新主题之前你必须清除旧的类。否则它将添加到 div 中，如 div class="classA class1 classB class2....."。所以我删除了这些类，然后在下面的代码片段中更新了新类。

var ContainerClasses="";
var TxtColor="";
var BackGroundColor = "";

// SWITCHING TEXT COLOR
$( "#TxtColor" ).change(function() {
    if ($(this).val()) {
        TxtColor= ' ' + $(this).val();
    } else { TxtColor = ""; }
    upDateTheme();
});

// SWITCHING BACKGROUND COLOR   
$( "#BackGroundColor" ).change(function() {
    if ($(this).val()) {
        BackGroundColor= ' ' + $(this).val();
    } else { BackGroundColor = ""; }
    upDateTheme();
});

function upDateTheme() {
    $('#Main').removeClass();
    ContainerClasses= TxtColor + ' ' + BackGroundColor;
    $('#Main').addClass(ContainerClasses);
}

div.ClassA {
  font-size:40px;
  color:green;
}
div.ClassB {
  font-size:10px;
  color:red;
}
div.Class1 {
  background:red;
}
div.Class2 {
  background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Main" class="">
 Test
</div>
 <div class="optionBox">
    <label>Text Color</label>
    <select id="TxtColor">
        <option value="">None</option>
        <option value="ClassA">Class A</option>
        <option value="ClassB">Class B</option>
    </select>
</div>
<div class="optionBox">
    <label>BackGround Color</label>
    <select id="BackGroundColor">
        <option value="">None</option>
        <option value="Class1">Class 1</option>
        <option value="Class2">Class 2</option>
    </select>
</div>