Question

我有一个带有一些可选类的div，我想用下拉选择切换。据我所知，我已经编写了以下脚本，但这种脚本并不完美。它会引发一个未定义的脚本。 select值如果select值为null。你可以非常友好地解决这个问题，或者用jQuery来指导我一些更好的技术来实现我的目标

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

很简单。您的值为undefined。因此，最初如下所示定义空值。

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

我添加了一些css样式并创建了小提琴。查看DEMO

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

＆＃13;

return input;

＆＃13;

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

＆＃13;

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

＆＃13;

要使其成为一段优秀的代码，您应该考虑使用<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来完成此操作：

＆＃13;

data-attributes

＆＃13;

$(document).ready(function() {

  $( "#TxtColor, #BackGroundColor" ).change(function() {
      upDateTheme(
          $(this).attr('id'),
          $(this).val()
      );
  });

  function upDateTheme(parameter, value) {
      $('#Main').attr('data-' + parameter, value);
  }
});

＆＃13;

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

＆＃13;

为简单起见，我建议始终只在HTML中使用小写字母表示标签，类和参数。小心这段代码，可能会出现问题，看看它如何将<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>更改为小写，稍后将在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更新带下拉选择值的类

3 个答案: