代码之家 › 专栏 › 技术社区 › kamran shah

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

html-select html jquery

kamran shah · 技术社区 · 7 年前

我有一个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>

3 回复 | 直到 7 年前

Suresh Ponnukalai 7 年前

非常简单。您的价值观是 undefined . 因此,最初定义空值,如下所示。

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

我添加了一些css样式并创建了小提琴。检查 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>

caramba 7 年前

您的代码以更简洁的形式出现。您不需要全局变量。使用可以在函数中传递的参数。这就是他们的目的:

$(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 使用颜色作为值,但只是想让你知道如何使用 数据属性 请参见:

$(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中使用!

Niklas 7 年前

如果您初始化三个变量,它应该可以正常工作。

此外,如果您想使代码稍微小一些,那么实际上不需要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);
  }
});