如何使用jquery，json和自定义数据属性在map方法内嵌套map方法

Question

我正在构建一个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 %>

使用此json，我试图通过遍历json中的不同URL来每秒更新src属性。 时间到了。 当我制作第一个地图时，我成功获取了URL。

但是，当我执行嵌套映射时，出现错误“未捕获的TypeError：未定义不是函数”。 现在，我没有更新src部分，因为我只是尝试获取其中的每个URL。

我尝试过的事情：

• 将映射更改为每个=不成功。

• 播放$（url）和$（u）的语法。

   var time = setInterval(function(){updateImage()}, 1000); var square_urls = ($($(".square-image")[0]).data("urls")); function updateImage(){ square_urls.map(function(urls){ urls.map(function(u){ console.log(u); }); }); } 

如果我不做第二张地图，我将成功获取URL。

第二个映射给我错误：“未捕获的TypeError：未定义不是函数。”

Answer 1

我重新思考了一下，首先要专注于更新一个图像。 我相信我试图一次做太多事情，需要进一步分解。 在updateImage函数中，我通过查找长度来更新一个正方形的图像，对其进行随机更新，然后在数组中调用随机化的url。

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

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

视图

  <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>  

JQuery的

  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;
  }
});

Answer 2

我想这就是你要的：

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

根据jQuery的文档：

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

因此，假设data-urls有一个数组，那么就无需再进行其他工作来从所有图像生成所有URL。

请注意，jQuery的map函数旨在用作选择器。 它无意产生副作用。

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