Question

我有一个包含许多选项的选择框。每个选项代表一个可以选择并添加到div的类名。 div可能已经有其他类不被触及。

我的问题是我只想在这些类之间切换 - 而不仅仅是继续添加新的类。如何创建一个循环遍历选择框的所有类名并在它们之间切换的脚本？

这就是我所拥有的 - 我只是添加了类 - 它不会切换。

HTML：

<form id="form">
  <div>
    <label for="height">Height:</label>
    <select id="height">
      <option>- Select class -</option>
      <option value="height133">133</option>
      <option value="height55">55</option>
      <option value="otherclass">127</option>
    </select>
  </div>
  <button type="button" id="go">Submit</button>
</form>
<div class="gridbox otherclass1 otherclass2">
  <div></div>
</div>

jQuery的：

$("#go").click(function() {
   var height = $("#height").find(":selected").val();
   $(".gridbox").toggleClass(height);
});

Fiddle here

提前多多感谢。

Answer 1

您需要删除之前添加的其他类。

$("#go").click(function() {
    var heightElem = $("#height");
    var height = heightElem.find("option[value]:selected").val();
    var allClassess = heightElem.find("option[value]") //traverse to all option elements
        .map(function() {
            return this.value ? this.value : null;
        }).get() // Get an array of all the class
        .join(' ') //Create a string;
    $(".gridbox").removeClass(allClassess).addClass(height);
});

DEMO

Answer 2

您可以将之前选择的类保留在变量中并在添加其他类之前将其删除，toggleClass将只添加/删除该类。

var height = '';
$("#go").click(function() {
  if(height !== '') {
     $(".gridbox").removeClass(height);
  }
  height = $("#height").find(":selected").val();
  $(".gridbox").addClass(height);
});

从选择选项中获取值 - 使用值toggleClass（）

2 个答案: