Question

我得到了数据。我带来了关于用户的最少信息。单击块时，将显示模态窗口。模态窗口，应该是更多信息。我无法在模态窗口中传输数据。也许我做错了。指出错误，请告诉我如何正确。 codepen.io/zaytsevav/pen/oBQrOm

Answer 1

您可以将结果存储在全局变量中，并使用索引在myModal中访问它。

var results = [];
getData('https://api.randomuser.me/1.0/?results=50&nat=gb,us&inc=gender,name,location,email,phone,picture',
  function(data) {

    var html = '';
    for (var i = 0; i < data["results"].length; i++) {
      var name = data["results"][i]["name"]["title"] + ' ' + data["results"][i]["name"]["first"] + ' ' + data["results"][i]["name"]["last"],
        img = data["results"][i]["picture"]["large"];
      html += '<div class="col-md-2 block__user_on" onclick="myModal(this.id)" id="' + [i] + '"> ';
      html += '<img src="' + img + '" title="' + name + '"/>';
      html += '<p class="block__user_on-capitalize">' + name + '</p>';
      html += '</div>';
    }
    document.getElementById("user").innerHTML = html;
    results = data["results"];
  }
);


function myModal(index) {
  var data = results[index];
  console.log(data);
  document.getElementById("Modal").style.display = "block";
  document.getElementById("userModal").innerHTML = '<div>' + data.name.first + " " + data.name.last + ',' + data.location.city + '</div>';

}

演示：https://jsbin.com/juxuhixubu/1/edit?js,output

这将使它工作，并将帮助您理解事物。但是如果项目有更多这样的用例，你可以考虑在Javascript中使用现代框架，其中可以用更好的方式完成。

Answer 2

您可以使用以下代码替换myModal函数来解决此问题：

function myModal(data) {

    document.getElementById("userModal").innerHTML = "";
    document.getElementById("userModal").appendChild(data);
    document.getElementById("Modal").style.display = "block";

    console.log(data);

}

它首先擦除模态可能具有的所有内容（通过将其innerHTML设置为空）然后使用appendChild方法添加div（即{{1}在模态窗口中。

您可以测试它是否有效here。

修改

正如documentation for appendChild function所述：

如果给定的子节点是对文档中现有节点的引用，则appendChild（）将其从当前位置移动到新位置。

这就是当您点击它时删除了块的原因。

因此，在下面的代码中，我使用了cloneNode function，问题解决了。

data

请告诉我这是否有用！

Answer 3

把它放在你的周期中：

document.getElementById("user").insertAdjacentHTML('beforeend', html);
document.getElementById(i).setAttribute('data-person', JSON.stringify(data["results"][i]));

而不是：

document.getElementById("user").innerHTML = html;

然后在myModal函数中添加：

console.log(JSON.parse(data.getAttribute('data-person')));

如何将数据从一个函数传递到另一个函数？

3 个答案: