如何覆盖我在循环中传递的数据

Question

TLDR：

如何更改通过each 循环附加到按钮的数组的值？

背景故事：

我正在创建一个包含各种不同图片的图片库。当用户登录时，我从数据库中检索数据（通过 ajax）向用户展示他或她上传的图片等。

但是在此过程中，我使用图像循环将所有图像附加到 div。

当用户单击加载的图像（此时文档已“准备好”-> 加载）时，在图像旁边检索到的数据显示在 modal 中。像这样：（注意：这是一个非常短的版本，有很多输入字段等都是这样创建的，但显示起来没什么用）。

- 图片是一个多维数组。 它看起来像这样：

images = [
    0 => [
      0 => 'here is the title',
      1 => 'Here comes the image path',
      2 => 'the ID of the image',
      3 => 'This is the accessibility which I will later down the road try to change'
    ],
   1 => [
      //repeat the above basically, but with different values
    ]
]

我为每个图像创建一个div 框的方式如下：（注意，这是一个简短的版本，主要问题是evenListener 而不是我创建div 的方式。所以我不包括那部分代码）

//the images here is an array!!
$(images).each(function(key, array) {
        let image = document.createElement('img');
            image.setAttribute('class', 'rounded resizeForcer');
            image.setAttribute('src', array[3]);
            image.setAttribute('data-toggle', 'modal');
            image.setAttribute('data-target', '#previewImageBig');
            image.addEventListener('click', function() {
                previewImage(array); //when clicked on the image, a modal will open up, while the modal opens the data will be passed to the modal and from there on I show the data
            });
});

当用户单击图像本身时，它会将多维数组中的数据一起显示并附加到modal。但是，用户可以更新外部人员访问图像的方式（假设您要上传带有令牌的图像，因此只能通过 URL 访问）。

问题：

当我以用户身份更新图像的可访问性时，如果我希望我的朋友看到​​图片，它应该发回一个新链接供我复制粘贴，并且这个链接应该覆盖在数组中设置的链接addEventListener。所以假设我有 3 张图像，这意味着我在图像数组中有索引 0、1 和 2，每个索引中有 4 个不同的索引。我想要实现但失败的是获取array（基本上是我在创建div 时附加的索引）并更改第三个索引的值。因此，当我单击所需的image 以弹出我的modal 时，它的值将被覆盖，而不是显示在我更改可访问性（索引 3）参考之前获取的数据：显示多维数组结构的代码。

Answer 1

如果我理解正确，您正试图根据用户输入更改图像的索引 3 值。诀窍是跟踪索引和“子索引”，然后再使用这些索引。你没有提供一个工作示例，所以我创建了一个非常简化的示例来说明你正在尝试做的事情；完成与 cmets 以帮助您了解正在发生的事情。

var images = [
  [
    'here is the title',
    'Here comes the image path',
    'the ID of the image',
     'This is the accessibility which I will later down the road try to change'
  ],
  [
    'here is the title 2',
    'Here comes the image path 2',
    'the ID of the image 2',
    'This is the accessibility which I will later down the road try to change 2'
  ],
];
// loops through each image
$.each(images, function(index, image) {
  // create a variable where the html of each "image" will be held
  var html = '';
  // loop through each array item in the current array
  $.each(image, function(subindex, value) {
    // builds an input for each "image" value and holds current index and subindex inside an html attribute that will be referenced later
    html += '<input type="text"  value="' + value + '" data-index="' + index + '" data-subindex="' + subindex + '">';
  });
  // create a button that will "save" the changes in each input, event listener for this is created later
  html += '<input type="button" class="sub-button" value="Save" style="background-color:yellow;">';
  // create a box container that will hold each "image's" html, only for this example
  $('#box').append('<div class="sub-box" style="border:1px solid black; padding:10px; margin:10px;">' + html + '</div>');
});
// create an event listener for all "Save" buttons that were created
$('.sub-button').click(function() {
  // clears any old status messages, only for this example
  $('#status').html('');
  // find all the inputs inside the same container of this button
  var inputs = $(this).parent().find('input[type="text"]');
  // loops through each input
  inputs.each(function() {
    // creates temporary object that holds the attributes of each input
    var attr = {
      'index': $(this).attr('data-index'),
      'subindex':$(this).attr('data-subindex'),
      'value': $(this).val()
    };
    // reference the images array again, but with the index, subindex, and value, this is what updates the each subarray value
    images[attr.index][attr.subindex] = attr.value;
    // output the changes that were done, for this example only
    $('#status').append('images[' + attr.index + '][' + attr.subindex + '] is now "' + attr.value + '".<br>');
  });
});

jsFiddle：https://jsfiddle.net/re7m9f35/

请记住，这里的更改是暂时的，您必须想办法保留用户所做的更改。