如何將數據從一個功能傳遞到另一個功能？

Question

我得到了數據。 我帶來了有關用戶的最少信息。 當您單擊一個塊時，將出現模態窗口。 模態窗口，應有更多信息。 我無法在模式窗口中傳輸數據。 也許我做錯了。 指出錯誤，請告訴我如何正確。 codepen.io/zaytsevav/pen/oBQrOm

Answer 1

您可以將結果存儲在全局變量中，並使用索引在myModal中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，輸出

這將使其起作用並幫助您理解事物。 但是，如果項目中有更多此類用例，則可以考慮使用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設置為nothing），然后使用appendChild方法以便在模式窗口中添加div（即data字符串中的div）。

您可以在這里測試它是否有效。

編輯

如關於appendChild函數的文檔中所述 ：

如果給定的子代是對文檔中現有節點的引用，則appendChild（）將其從其當前位置移動到新位置。

這就是為什么您單擊該塊時將其刪除的原因。

因此，在下面的代碼中，我使用了cloneNode函數 ，問題得以解決。

function myModal(data) {

    console.log(data);

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

} 

Pleasae讓我知道這是否有幫助！

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