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

How do you nest a map method inside a map method using jquery, json and custom data attributes

本文关键字：方法 map 嵌套 数据属性 自定义 jquery 何使用 json      更新时间：2023-09-26

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

然而，当我做嵌套映射时，我会得到错误"Uncaught TypeError:undefined不是一个函数。"现在我没有更新src部分，因为我只是试图在一个url中获取每个url。

我尝试过的东西：

  • 将映射更改为each=不成功

  • 播放$（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。

第二个映射给了我错误："UnaughtTypeError:undefined不是函数。"

我重新调整了我的想法，首先专注于更新一个图像；我相信我试图同时做太多，需要进一步打破它。在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;
  }
});

我想这就是你想要的：

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); });
相关文章：