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>