Javascript 如何使用jquery、json和自定义数据属性在映射方法中嵌套映射方法

我正在构建一个rails应用程序。我使用一个数据属性来获取json

  <% @image_urls.each_slice(5) do |row| %>
    <% row.each do |_, urls| %>
      <li class="square-image" data-urls=<%= urls.to_json %>>
        <span class="user-image"><%= image_tag(urls.sample) %></span>
      </li>
    <% end %>
  <% end %>

如果不进行第二次映射，我将成功获取URL

---

第二张图给了我一个错误：“uncaughttypeerror:undefined不是一个函数。”

我想这就是你想要的：

var $squares = $(".square-image");
var urls = $squares.map(function(square) { return $(square).data("urls"); });

根据jQuery的文档：

返回的数组将展平为结果数组

因此，假设

数据URL

中有一个数组，那么从所有图像生成所有URL就不需要更多的工作了

请注意，jQuery的map函数旨在作为选择器。它并没有副作用

// Use `each` when you want to *do* something instead of *select* something.
$.each(urls, function(url) { console.log(url); });

---

我改变了我的思维，首先专注于更新一张图片；我相信我当时想做的太多了，需要进一步分解。在updateImage函数中，我通过查找长度更新一个正方形的图像，随机更新它，然后在数组中调用随机url

在更新图像工作之后，我集中精力更新所有的图像。在updateAllImages函数中，我可以使用updateImage函数，而不必嵌套并因此使代码混乱。注意，一开始我被抛弃了，因为我没有意识到jquery的each方法调用索引和值（与Ruby不同），所以我必须确保为索引添加一个参数（在本例中为x）

updateAllImages函数是通过time函数调用的，该函数每秒更新一次

看法

---

您的数据URL属性中呈现了什么JSON？S3存储桶中照片的URL。是的，但是JSON看起来像什么？这是一个数组，还是什么？第二个贴图背后的目的是什么？第一个贴图循环每个正方形的图像，这导致一个正方形图像的多个URL数组。第二个映射应该遍历多个url，一次只抓取url。对于“var squareUrls=$squares.map（function（square）{return square.data（“url”）；}）”行，它返回的是未定义的错误。哎呀，我忘了用元素创建jquery对象。尝试我的更新。错误为“未捕获引用错误：未定义URL”。。。在每一个语句中，我都尝试了SquareURL，但这也不起作用。@Lauren:当你使用SquareURL时，它做了什么？您知道如何使用浏览器的开发工具调试javascript吗？知道。我知道如何使用浏览器的开发工具进行调试。我尝试在each语句中使用squareURL。

// Use `each` when you want to *do* something instead of *select* something.
$.each(urls, function(url) { console.log(url); });

  <ul>
  <% @image_urls.each_slice(5) do |row| %>
    <% row.each do |_, urls| %>
      <li class="square-image" data-urls=<%= urls.to_json %>>
        <span class="user-image"><%= image_tag(urls.sample) %></span>
      </li>
    <% end %>
  <% end %>
  </ul>  

  var squares = $(".square-image");
  var time = setInterval(function(){updateAllImages(squares)}, 1000);

  function updateAllImages(squares) {
    $.each(squares, function(_, square) {
      updateImage(square);
    });
  }

  function updateImage(square) {
    var urls = $(square).data("urls");
    var urlCount = urls.length;
    var randomIndex = Math.floor(Math.random() * urlCount);
    var newUrl = urls[randomIndex];

    // the image currently lives in a span so that's why I
    // need to call children twice
    var image = $(square).children().children()[0];
    image.src = newUrl;
  }
});