html - jquery如何设置数组的键值

Question

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

如何使用 map 函数为 menu_items 设置键和值？

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>

标签： htmljqueryarraysdictionarykey

Answer 1

您可以像这样使用 .map

value顺便说一句LI没有

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>