如何使用 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 属性。时机正在发挥作用。当我做第一张地图时，我成功地抓取了网址。

但是，当我执行嵌套映射时，我收到错误“Uncaught TypeError: undefined is not a function”。现在我没有更新 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);
        });
      });
    }
  

如果我不做第二张地图，我成功获得了网址。

第二张地图给了我错误：“Uncaught TypeError: undefined is not a function。”

Answer 1

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

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

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