jquery如何设置数组的键值

Question

我有一段非常丑陋的代码，用于设置 menu_items 数组的 key => 值。我想使用 map 函数从 ul 中设置键和值，但无法解决，所以求助于这个。

如何使用map函数来设置menu_items的key和value？

function ClothingSetup(clothing) {
  var menu_items = {};
  menu_items["hat"] = "hat";
  menu_items["mask"] = "mask";
  menu_items["coat"] = "coat";
  menu_items["shirt"] = "shirt";
  menu_items["gloves"] = "gloves";
  menu_items["pants"] = "pants";
  menu_items["boots"] = "boots";
  menu_items["bandana"] = "bandana";

  $.each(clothing, function(index, item) {
    if (index == menu_items[index] && item > 1) {
      $('#' + index).toggleClass("active");
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="nav-cat" id="hat" value="1"><img src="/html/img/hat.png"></li>
  <li class="nav-cat" id="mask" value="1"><img src="/html/img/mask.png"></li>
  <li class="nav-cat" id="coat" value="1"><img src="/html/img/coat.png"></li>
  <li class="nav-cat" id="shirt" value="1"><img src="/html/img/shirt.png"></li>
  <li class="nav-cat" id="gloves" value="1"><img src="/html/img/gloves.png"></li>
  <li class="nav-cat" id="pants" value="1"><img src="/html/img/pants.png"></li>
  <li class="nav-cat" id="boots" value="1"><img src="/html/img/boots.png"></li>
  <li class="nav-cat" id="bandana" value="1"><img src="/html/img/bandanna.png"></li>
</ul>

Answer 1

您可以遍历所有 <li>s 并提取它们的 ID，然后将它们放到 menu_items 对象上：

const menu_items = {};
for (const elm of document.querySelectorAll('li')) {
  menu_items[elm.id] = elm.id;
}

但 ID 可能应该保留给绝对唯一的东西，而不是类似的重复元素，如列表项。如果您需要字符串，我建议您将其放入数据属性中，例如

<li data-name="hat"

并用

提取它

const menu_items = {};
for (const elm of document.querySelectorAll('li')) {
  const { name } = elm.dataset;
  menu_items[name] = name;
}

Answer 2

你可以像这样使用.map

顺便说一句，LI 没有value

const items = $(".nav-cat").map(function() { return {item: this.dataset.item,value:this.dataset.value} }).get()

console.log(items)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="nav-cat" data-item="hat" data-value="1"><img src="/html/img/hat.png"></li>
  <li class="nav-cat" data-item="mask" data-value="1"><img src="/html/img/mask.png"></li>
  <li class="nav-cat" data-item="coat" data-value="1"><img src="/html/img/coat.png"></li>
  <li class="nav-cat" data-item="shirt" data-value="1"><img src="/html/img/shirt.png"></li>
  <li class="nav-cat" data-item="gloves" data-value="1"><img src="/html/img/gloves.png"></li>
  <li class="nav-cat" data-item="pants" data-value="1"><img src="/html/img/pants.png"></li>
  <li class="nav-cat" data-item="boots" data-value="1"><img src="/html/img/boots.png"></li>
  <li class="nav-cat" data-item="bandana" data-value="1"><img src="/html/img/bandanna.png"></li>
</ul>