合并数组并输出到 HTML答案

【问题标题】：Combine arrays and output to HTML合并数组并输出到 HTML
【发布时间】：2021-02-19 02:52:31
【问题描述】：

有2个带变量的数组，你需要把它们组合起来，用btn-menu类创建按钮元素，数据元素category（用数组中的一个变量)，以及数组中的文本。

let category = ['Pizza ????', 'Rolls ????', 'Sets ????', 'Hot dish????', 'Salads????'];
let slug_id = ['pizza', 'rolls', 'sets', 'hot-dish', 'salads'];

第一个和第二个数组的顺序对应内容，即Pizza ????(0)和pizza(0) 需要将所有这些元素输出到带有 container 类的 HTML nav 对象。

你应该得到一个带有按钮的水平菜单：

<nav class="container">
    <button class="btn-menu ripple-btn" category="pizza">Pizza ????</button>
    <button class="btn-menu ripple-btn" category="rolls">Rolls ????</button>
    <button class="btn-menu ripple-btn" category="sets">Sets ????</button>
    <button class="btn-menu ripple-btn" category="hot-dish">Hot dish????</button>
    <button class="btn-menu ripple-btn" category="salads">Salads ????</button>
</nav>

您需要 js 或 jQuery 中的代码。请帮我解决问题:)

这是我尝试过的：

var category = ['Pizza ????', 'Rolls ????', 'Sets ????', 'Hot dish????', 'Salads????'];
var slug_id = ['pizza', 'rolls', 'sets', 'hot-dish', 'salads'];

var nav = $('.container');
for (var i = 0; i < category.length; i++) {
    var btn = $('<button/>');
    var class_btn = $(btn).attr('class','btn-menu ripple-btn');
    var text_btn = $(class_btn).text(category[i]);
 }
$(btn).appendTo(nav);

【问题讨论】：

请展示您解决此课程作业的尝试。 SO 在这里帮助您调试代码，而不是为您编写代码
您只需要在其中一个数组上进行for 循环，使用索引从另一个数组中获取相应的值，然后您就可以在模板字符串中使用这些值。
添加了我写的代码，但我只输出一个值，我不知道如何添加第二个数组:(

标签： javascript jquery arrays append

【解决方案1】：

由于您已经在遍历数组并且两个数组的长度相同，您可以使用$(btn).attr('category', slug_id[i]); 这将在每个迭代内部按钮的i 位置添加数组值。

演示代码：

var category = ['Pizza ?', 'Rolls ?', 'Sets ?', 'Hot dish?', 'Salads?'];
var slug_id = ['pizza', 'rolls', 'sets', 'hot-dish', 'salads'];

var nav = $('.container');
for (var i = 0; i < category.length; i++) {

  var btn = $('<button/>');
  $(btn).attr('class', 'btn-menu ripple-btn');
  $(btn).text(category[i]);
  $(btn).attr('category', slug_id[i]); //use this to add attribute with value from array
  $(btn).appendTo(nav); //add button created inside nav
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="container">
</nav>

【讨论】：