获取选择字段的所有可能值

Question

我有一个不同值的选择字段：

• 非洲
• 欧洲
• 美国
• 亚洲
• 大洋洲

选择一个值时，我想将CSS类添加到特定的DIV，CSS类的名称为选择的值。很简单：

  $(document).on("change",  "[data-name='continent'] select", function () {
    var continent = $('[data-name="continent"] select').val();
    $("#mydiv").addClass(continent);
  });

这工作正常，但有一个问题：如果我更改选择字段值，以前的类将不会被删除。我做不到：

$("#mydiv").removeClass().addClass(continent); 

因为#mydiv 已经有其他重要的类。 我可以这样做：

$("#mydiv").removeClass('africa').removeClass('europe').removeClass('america').removeClass('asia').removeClass('oceania').addClass(continent);

但实际上我有不止 5 个选项，而且它们将来可能会改变；我宁愿保持灵活。 最重要的是，我想学习 javascript。 有什么方法可以删除作为选择字段值的所有类？

Answer 1

试试这个：

$('#continent').on('change', (e) => {
  let $myDiv = $('#myDiv'),
      $continent = $(e.target),
      possibleValues = $continent.find('option').toArray().map(item => item.value).join(' ');
  
  $myDiv.removeClass(possibleValues).addClass($continent.val());
});

解释：

1. 从选择中收集所有可能的值：

   $continent.find('option').toArray().map(item => item.value)
   

2. 将它们以空格分隔的列表连接成一个字符串：

   .join(' ');
   

3. 从目标元素中删除该列表中的所有类

   $myDiv.removeClass(possibleValues)
   

4. 在其后添加选定的类。

演示：

$('#continent').on('change', (e) => {
  let $myDiv = $('#myDiv'),
      $continent = $(e.target),
      possibleValues = $continent.find('option').toArray().map(item => item.value).join(' ');
  
  $myDiv.removeClass(possibleValues).addClass($continent.val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="continent">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
  <option value="d">D</option>
  <option value="e">E</option>
</select>

<div id="myDiv" class="other-class keep-me">my div</div>

Answer 2

要获取要删除的类的列表，您可以使用以下内容：

[...testEl.querySelectorAll('option')].map(x => x.value).join(' ');

这是普通的 JavaScript...如果在 jQuery 中完成，它看起来像这样：

$('#my-select > option').map((i,el)=> el.value).toArray().join(' ');

这将拉出一个选项列表并为您提供一个以空格分隔的字符串。然后你可以使用这个列表来做你的.removeClass()。

但是我想知道类是否是最好的选择。在下面的 sn-p 中，有一个使用数据属性而不是类的示例，以及如何在 CSS 选择器中使用该数据属性（这也适用于 jQuery 或 querySelector）。也许可以考虑...

const testEl = document.querySelector('#test');

const allOptions = $('#test > option').map((i,el)=> el.value).toArray().join(' ');
console.log(allOptions);

const testChange = e => {
  const el = e.target;
  el.dataset.chosen = el.value;
};
testEl.addEventListener('change', testChange);
testChange({ target: testEl });

#test[data-chosen="africa"] {
  color: red;
}

#test[data-chosen="america"] {
  color: blue;
}

#test {
  color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='test' id='test' value='europe'>
  <option value='africa'>africa</option>
  <option value='europe'>europe</option>
  <option value='america'>america</option>
  <option value='asia'>asia</option>
  <option value='oceania'>oceania</option>
</select>

Answer 3

您必须创建一个字符串，其中包含您要添加/删除的所有类，以空格分隔：

$("#mydiv").removeClass("africa europe america asia oceania");