使用 jQuery 更新类下拉列表 select 值

Question

我有一个 div 和一些可选的类集，我想使用下拉列表 select 进行切换。据我所知，我编写了以下脚本，该脚本无法完美运行。如果 select 值为 null，它会抛出 "undefined" 值。如果您能解决这个问题，或者可以指导我使用 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>

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);
  }
});

使用 jQuery 更新类下拉列表 select 值

updating classes with dropdown select value with jQuery

html

jquery

html-select

使用 jQuery 更新 类 下拉列表 select 值

updating classes with dropdown select value with jQuery

html

jquery

html-select

使用 jQuery 更新类下拉列表 select 值