如何在jQuery中“联接”并遍历2个关联数组？

Question

我有15个部分（称为基数），每个部分都有其自己的字母按钮集。

我要做的就是将字母数字与它们所在的基数/节关联起来。因此，例如，如果用户单击基数7下的字母“ B”，我想返回的是用户单击了字母B位于7下方

我将所需的所有数据放入2个数组中，并动态生成了字母。 一切都按预期工作，但是我无法将字母与基准关联。

您可以查看下面的演示并打开控制台日志，然后尝试单击任何按钮。

到目前为止，这是我的代码。

如您所见，我正在尝试从第二个字母循环内的第一个forEach循环返回base[i].id 。

console.log(alphabet[i].id + ' has been clicked on ' + base[i].id);

这将返回以下内容

A has been clicked on base1
B has been clicked on base2
C has been clicked on base3

但是他们都应该在base7上说，因为这些按钮位于何处。

更珍贵的是，下面的代码应该绑定两个数组，因为它要求应用纹理的base名称/编号

setMaterialUIDPending (base[i].name, AlbedoPBR, alphabet[i].id+"-letter");

我希望我有道理。

 let base = [ { 'id': 'base1', 'btn': 'b1-include', "name": "baseone" }, { 'id': 'base2', 'btn': 'b2-include', "name": "basetwo" }, { 'id': 'base3', 'btn': 'b3-include', "name": "basethree" }, { 'id': 'base4', 'btn': 'b4-include', "name": "basefour" }, { 'id': 'base5', 'btn': 'b5-include', "name": "basefive" }, { 'id': 'base6', 'btn': 'b6-include', "name": "basesix" }, { 'id': 'base7', 'btn': 'b7-include', "name": "baseseven" }, { 'id': 'base8', 'btn': 'b8-include', "name": "baseeight" }, { 'id': 'base9', 'btn': 'b9-include', "name": "basenine" }, { 'id': 'base10', 'btn': 'b10-include', "name": "baseten" }, { 'id': 'base11', 'btn': 'b11-include', "name": "baseeleven" }, { 'id': 'base12', 'btn': 'b12-include', "name": "basetwelve" }, { 'id': 'base13', 'btn': 'b13-include', "name": "basethirteen" }, { 'id': 'base14', 'btn': 'b14-include', "name": "basefourteen" }, { 'id': 'base15', 'btn': 'b15-include', "name": "basefifteen" }, ]; let alphabet = [ { "id":"A", "url":"https://example.com/A.png" }, { "id":"B", "url":"https://example.com/B.png" }, { "id":"C", "url":"https://example.com/C.png" } ]; let preview = $('.preview'); $.each(base, function(i, v) { let $collapse = $('<div>', {'class': 'collapse', id: base[i].id}); let $btn = $('<a>', {'href': '#', 'class': 'btn btn-sm btn-primary', id: base[i].btn}); let $letters = $('<div>', {'class': 'letters'}); $btn.text(base[i].btn); preview.append($collapse); $btn.on('click', function() { if($(this).attr('data-click-state') == 1) { $(this).attr('data-click-state', 0); setOpacity(base[i].name, 0.2); } else { $(this).attr('data-click-state', 1); setOpacity(base[i].name, 1); } }); $collapse.append($btn); $collapse.append($letters); $.each(alphabet, function (i, v) { let $href = $("<a>", {id: alphabet[i].id, "class": "btn btn-sm btn-dark", 'href': '#', 'title': alphabet[i].id, 'data-src': alphabet[i].url, 'data-base': base[i].id}); $href.text(alphabet[i].id); $href.on('click', function(){ console.log(alphabet[i].id + ' has been clicked on ' + base[i].id); setMaterialUIDPending (base[i].name, AlbedoPBR, alphabet[i].id+"-letter"); addTexture(alphabet[i].url, 'N-letter', true); }); $letters.append($href); }); }); 

 .preview ul { list-style-type: none; display: flex; flex-wrap: wrap; } .preview ul li { flex: 1 0 25%; margin: 5px; } 

 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="preview"> <ul> <li id="b1"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base1" role="button" aria-expanded="false" aria-controls="base1">Base 1</a></li> <li id="b2"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base2" role="button" aria-expanded="false" aria-controls="base2">Base 2</a></li> <li id="b3"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base3" role="button" aria-expanded="false" aria-controls="base3">Base 3</a></li> <li id="b4"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base4" role="button" aria-expanded="false" aria-controls="base4">Base 4</a></li> <li id="b5"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base5" role="button" aria-expanded="false" aria-controls="base5">Base 5</a></li> <li id="b6"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base6" role="button" aria-expanded="false" aria-controls="base5">Base 6</a></li> <li id="b7"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base7" role="button" aria-expanded="false" aria-controls="base5">Base 7</a></li> <li id="b8"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base8" role="button" aria-expanded="false" aria-controls="base8">Base 8</a></li> <li id="b9"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base9" role="button" aria-expanded="false" aria-controls="base9">Base 9</a></li> <li id="b10"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base10" role="button" aria-expanded="false" aria-controls="base10">Base 10</a></li> <li id="b11"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base11" role="button" aria-expanded="false" aria-controls="base11">Base 11</a></li> <li id="b12"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base12" role="button" aria-expanded="false" aria-controls="base12">Base 12</a></li> <li id="b13"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base13" role="button" aria-expanded="false" aria-controls="base13">Base 13</a></li> <li id="b14"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base14" role="button" aria-expanded="false" aria-controls="base14">Base 14</a></li> <li id="b15"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base15" role="button" aria-expanded="false" aria-controls="base15">Base 15</a></li> </ul> </div> 

Answer 1

您在两个$.each循环中都使用了相同的迭代变量i和v 。 因此，当您遍历alphabet ， base[i]使用alphabet的索引，而不使用base的索引。 您应该使用其他变量。

正如我在评论中提到的那样，您无需为数组建立索引，这就是使用$.each的全部$.each -回调参数是数组的当前元素。 因此，在每个数组中使用比v更独特的名称。

 let base = [ { 'id': 'base1', 'btn': 'b1-include', "name": "baseone" }, { 'id': 'base2', 'btn': 'b2-include', "name": "basetwo" }, { 'id': 'base3', 'btn': 'b3-include', "name": "basethree" }, { 'id': 'base4', 'btn': 'b4-include', "name": "basefour" }, { 'id': 'base5', 'btn': 'b5-include', "name": "basefive" }, { 'id': 'base6', 'btn': 'b6-include', "name": "basesix" }, { 'id': 'base7', 'btn': 'b7-include', "name": "baseseven" }, { 'id': 'base8', 'btn': 'b8-include', "name": "baseeight" }, { 'id': 'base9', 'btn': 'b9-include', "name": "basenine" }, { 'id': 'base10', 'btn': 'b10-include', "name": "baseten" }, { 'id': 'base11', 'btn': 'b11-include', "name": "baseeleven" }, { 'id': 'base12', 'btn': 'b12-include', "name": "basetwelve" }, { 'id': 'base13', 'btn': 'b13-include', "name": "basethirteen" }, { 'id': 'base14', 'btn': 'b14-include', "name": "basefourteen" }, { 'id': 'base15', 'btn': 'b15-include', "name": "basefifteen" }, ]; let alphabet = [ { "id":"A", "url":"https://example.com/A.png" }, { "id":"B", "url":"https://example.com/B.png" }, { "id":"C", "url":"https://example.com/C.png" } ]; let preview = $('.preview'); $.each(base, function(i, cur_base) { let $collapse = $('<div>', {'class': 'collapse', id: cur_base.id}); let $btn = $('<a>', {'href': '#', 'class': 'btn btn-sm btn-primary', id: cur_base.btn}); let $letters = $('<div>', {'class': 'letters'}); $btn.text(cur_base.btn); preview.append($collapse); $btn.on('click', function() { if($(this).attr('data-click-state') == 1) { $(this).attr('data-click-state', 0); setOpacity(cur_base.name, 0.2); } else { $(this).attr('data-click-state', 1); setOpacity(cur_base.name, 1); } }); $collapse.append($btn); $collapse.append($letters); $.each(alphabet, function (i, letter) { let $href = $("<a>", {id: letter.id, "class": "btn btn-sm btn-dark", 'href': '#', 'title': letter.id, 'data-src': letter.url, 'data-base': cur_base.id}); $href.text(letter.id); $href.on('click', function(){ console.log(letter.id + ' has been clicked on ' + cur_base.id); setMaterialUIDPending (cur_base.name, AlbedoPBR, letter.id+"-letter"); addTexture(letter.url, 'N-letter', true); }); $letters.append($href); }); }); 

 .preview ul { list-style-type: none; display: flex; flex-wrap: wrap; } .preview ul li { flex: 1 0 25%; margin: 5px; } 

 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="preview"> <ul> <li id="b1"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base1" role="button" aria-expanded="false" aria-controls="base1">Base 1</a></li> <li id="b2"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base2" role="button" aria-expanded="false" aria-controls="base2">Base 2</a></li> <li id="b3"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base3" role="button" aria-expanded="false" aria-controls="base3">Base 3</a></li> <li id="b4"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base4" role="button" aria-expanded="false" aria-controls="base4">Base 4</a></li> <li id="b5"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base5" role="button" aria-expanded="false" aria-controls="base5">Base 5</a></li> <li id="b6"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base6" role="button" aria-expanded="false" aria-controls="base5">Base 6</a></li> <li id="b7"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base7" role="button" aria-expanded="false" aria-controls="base5">Base 7</a></li> <li id="b8"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base8" role="button" aria-expanded="false" aria-controls="base8">Base 8</a></li> <li id="b9"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base9" role="button" aria-expanded="false" aria-controls="base9">Base 9</a></li> <li id="b10"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base10" role="button" aria-expanded="false" aria-controls="base10">Base 10</a></li> <li id="b11"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base11" role="button" aria-expanded="false" aria-controls="base11">Base 11</a></li> <li id="b12"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base12" role="button" aria-expanded="false" aria-controls="base12">Base 12</a></li> <li id="b13"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base13" role="button" aria-expanded="false" aria-controls="base13">Base 13</a></li> <li id="b14"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base14" role="button" aria-expanded="false" aria-controls="base14">Base 14</a></li> <li id="b15"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base15" role="button" aria-expanded="false" aria-controls="base15">Base 15</a></li> </ul> </div>