从 select 选项中获取值 - 使用值来 toggleClass()

Question

我有一个 select 框，里面有很多选项。每个选项代表一个 class 名称，可以 select 编辑并添加到 div。 div 可能已经有其他 class 不被触及。

我的问题是我只想在这些 class 之间切换 - 而不是不断添加新的。我如何创建一个脚本来遍历 select 框的所有 class 名称并在它们之间切换？

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

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

您可以将先前选择的 class 保留在一个变量中，然后在添加另一个 class 之前将其删除，toggleClass 只会 add/remove class.

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

从 select 选项中获取值 - 使用值来 toggleClass()

Get values from select options - use values to toggleClass()

jquery

toggleclass