HTML 中的自定義屬性 (data-) 在 JavaScript 中不起作用

Question

我有一個帶有幾個選項的選擇欄，我正在嘗試對某些內容進行排序，並且我也在嘗試實現，如果您再次單擊該選項，它將切換到升序或降序。

我有這個 HTML 元素：

 <select name="theme" id="sortSelect"> <option> - </option> <option value="firstName" data-sort-direction="asc">First Name </option> <option value="lastName" data-sort-direction="asc">Last Name </option> <option value="house" data-sort-direction="asc">House </option> </select>

我通過使用 this 關鍵字在 JavaScript 中獲取值，我添加了一個事件偵聽器來偵聽“更改”，這會導致一個函數，在該函數中我得到這樣的值： const selectedValue = this.value; 這完全正常，但是當我嘗試在 JavaScript 中獲取data-sort-direction='asc' ，如下所示： let sortDirection = this.dataset.sortDirection; 然后它返回未定義。 我在這里做錯了什么？ 幫助將不勝感激！

編輯：這些是我正在使用的兩個功能：

function getSortedValues() {
  const selectedValue = this.value;
  let sortDirection = this.dataset.sortDirection;
  if (sortDirection === 'asc') {
    this.dataset.sortDirection = 'desc';
  } else {
    this.dataset.sortDirection = 'asc';
  }
  console.log(sortDirection);
  getSortedStudent(selectedValue, sortDirection);
}

function getSortedStudent(pressedValue, sortDirection) {
  let sortedStudents = [];

  let direction = 1;
  if (sortDirection === 'desc') {
    direction = -1;
  } else {
    sortDirection = 1;
  }

  sortedStudents = allStudents.sort((a, b) => {
    if (a[pressedValue] < b[pressedValue]) {
      return -1 * direction;
    } else {
      return 1 * direction;
    }
  });
  displayList(sortedStudents);
}

Answer 1

this.dataset是<select>的data屬性，而不是<option> 。 您可以通過以下方式獲得：

let sortDirection = this.options[this.selectedIndex].dataset.sortDirection;

請注意，這可能仍然是undefined ，因為您的初始選項沒有data-sort-direction屬性。

Answer 2

正如@Tim Lewis 的回答中所提到的，選擇值屬性發生了變化，但<option>沒有其他任何內容被繼承。 有很多方法可以通過單選框、復選框或下拉菜單找到所選項目，但我更喜歡的方法是:checked偽選擇器。 這是一個例子。

 var select = document.querySelector('#sortSelect') select.addEventListener('change', function(e) { var selectedOption = document.querySelector('option:checked') console.log(this.value, selectedOption.dataset); })

 <select name="theme" id="sortSelect"> <option> - </option> <option value="firstName" data-sort-direction="asc">First Name </option> <option value="lastName" data-sort-direction="asc">Last Name </option> <option value="house" data-sort-direction="asc">House </option> </select>