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

Question

我有一个div，有一些可选的类，我想用下拉选择切换。据我所知，我编写了以下脚本，该脚本运行不正常..如果select值为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样式并创建了小提琴。检查DEMO

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

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>

Answer 2

您的代码更简洁。您不需要全局变量。使用可以在函数中传递的参数。这就是他们的用途：

$(document).ready(function() {
  $( "#TxtColor, #BackGroundColor" ).change(function() {
      upDateTheme(
          $(this).attr('id'),
          $(this).val()
      );
  });

  function upDateTheme(id, value) {
    var $main = $('#Main');
    // via the id find all options to reset
    // remove all those classes before adding the new one
    $('#'+id+' option').each(function(index, element){
        $main.removeClass(element.value);
    });
    
    $main.addClass(value);
  }
});

#Main {
    width: 100px;
    height: 100px;
    border: solid 1px black;
}

#Main.ClassA {
    color: red;
}
#Main.ClassB {
    color: green;
}
#Main.Class1 {
    background-color: orange;
}
#Main.Class2 {
    background-color: fuchsia;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Main" class="">
  Lorem ipsum
</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>

为了使它成为一个很好的代码，你应该考虑使用data-attributes并使用颜色作为值，但只是为了让你知道如何用data-attributes完成它看到：

$(document).ready(function() {

  $( "#TxtColor, #BackGroundColor" ).change(function() {
      upDateTheme(
          $(this).attr('id'),
          $(this).val()
      );
  });

  function upDateTheme(parameter, value) {
      $('#Main').attr('data-' + parameter, value);
  }
});

#Main {
    width: 100px;
    height: 100px;
    border: solid 1px black;
}

[data-txtcolor="ClassA"] {
    color: red;
}
[data-txtcolor="ClassB"] {
    color: green;
}
[data-backgroundcolor="Class1"] {
    background-color: orange;
}
[data-backgroundcolor="Class2"] {
    background-color: fuchsia;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Main" class="">
 <!-- SOME HTML INSIDE -->
 lorem ipsum
</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>

为简单起见，我建议始终只在HTML中使用小写字母表示标签，类和参数。小心这个代码，可能会出现问题，看看它如何将id更改为小写，稍后将在CSS中使用！

Answer 3

如果你初始化你的三个变量它应该工作正常。

另外，如果你想让代码变小，你真的不需要if语句。这里以jsfiddle为例。

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

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

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

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