獲取選擇欄位的所有可能值

我有一個具有不同值的選擇欄位：

• 非洲
• 歐洲
• 美國
• 亞洲
• 大洋洲

選擇值時，我想將 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。有什么方法可以洗掉作為選擇欄位值的所有類？

uj5u.com熱心網友回復：

要獲取要洗掉的類的串列，您可以使用以下內容：

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

這是普通的 JavaScript……如果用 jQuery 完成，它看起來像這樣：

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

這將拉出選項串列并為您提供一個以空格分隔的字串。然后你可以使用這個串列來做你的.removeClass().

但是我想知道 class 是否是最好的選擇。在下面的代碼片段中有一個使用資料屬性而不是類的示例，以及如何在 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>

uj5u.com熱心網友回復：

嘗試這個：

$('#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>

uj5u.com熱心網友回復：

您必須創建一個字串，其中包含要添加/洗掉的所有類，以空格分隔：

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

標籤：javascript 查询

上一篇：將滑鼠懸停在元素上以激活子元素以單擊？

下一篇：如果未定義某些內容，如何檢查jquery