Question

你能看到我在这里想做什么吗？我想将一些对象推入一个变量，但要保持整洁和包含。

var toggles = document.querySelectorAll('[data-search-toggle]').forEach(function(el) {
      this.push({ 'element': el, 'select': el.dataset });
    });

显然上面的代码不起作用，这只是我想要的概念，所以如果我在下面的console.log toggles，我就会这样做：

[
  { 
    'element': [Object],
    'select': 'dropdown-search__select--make'
  },
  { 
    'element': [Object],
    'select': 'dropdown-search__select--make'
  },
  { 
    'element': [Object],
    'select': 'dropdown-search__select--make'
  },
]

编辑：或者我需要做这样的事情：

var tmp;
var toggles = document.querySelectorAll('[data-search-toggle]').forEach(
  tmp.push(function(el) {
    return { 'element': el, 'select': el.dataset };
  })
);

HTML：

<input type="radio" class="dropdown-search__radio" name="vehtype" id="dropdown-search__vehtype--cars" value="cars" checked required data-search-toggle="dropdown-search__select--make">
        <label class="dropdown-search__label--radio" for="dropdown-search__vehtype--cars">Cars</label>

        <input type="radio" class="dropdown-search__radio dropdown-search__radio" name="vehtype" id="dropdown-search__vehtype--vans" value="vans" data-search-toggle="dropdown-search__select--make">
        <label class="dropdown-search__label--radio" for="dropdown-search__vehtype--vans">Vans</label>

        <input type="radio" class="dropdown-search__radio dropdown-search__radio" name="vehtype" id="dropdown-search__vehtype--bikes" value="bikes" data-search-toggle="dropdown-search__select--make">
        <label class="dropdown-search__label--radio" for="dropdown-search__vehtype--bikes">Bikes</label>

Answer 1

您可以将querySelectorAll的结果转换为具有Array.from函数的数组，并将map函数作为第二个参数传递，以包装对象中的每个元素。

const toggles = Array.from(document.querySelectorAll('[data-search-toggle]'), (el) => {
  return {
    element: el,
    select: el.dataset
  };
});

console.log(toggles);

<input type="radio" class="dropdown-search__radio" name="vehtype" id="dropdown-search__vehtype--cars" value="cars" checked required data-search-toggle="dropdown-search__select--make">
<label class="dropdown-search__label--radio" for="dropdown-search__vehtype--cars">Cars</label>

<input type="radio" class="dropdown-search__radio dropdown-search__radio" name="vehtype" id="dropdown-search__vehtype--vans" value="vans" data-search-toggle="dropdown-search__select--make">
<label class="dropdown-search__label--radio" for="dropdown-search__vehtype--vans">Vans</label>

<input type="radio" class="dropdown-search__radio dropdown-search__radio" name="vehtype" id="dropdown-search__vehtype--bikes" value="bikes" data-search-toggle="dropdown-search__select--make">
<label class="dropdown-search__label--radio" for="dropdown-search__vehtype--bikes">Bikes</label>

Answer 2

您可以使用spread元素将NodeList转换为Array，.map()以返回数组中每个元素的对象。要获取.dataset其中属性在单词字符之间包含-个字符，驼峰式大小写属性引用

var toggles = [...document.querySelectorAll("[data-search-toggle]")].map(el =>
                ({ "element": el, "select": el.dataset.searchToggle })
              });

JavaScript：将每个querySelectorAll结果推送到变量中

2 个答案: