Question

我正在尝试使用循环来显示数组内部的图像。我正在使用的代码是生成文本块，但我需要它来从文本中包含的链接生成图像，而不是文本本身。我不确定循环是否应该将此信息放入img src =“”或div或完全不同的东西。无论哪种方式，希望是循环遍历数组，而不是返回文本块返回图像，只是使用文本作为所述图像的描述。最后，他们应该是12张图像，下面有描述，而不是12块文字。任何指导将不胜感激！

var xmlHttp = createHttpRequestObj();
function createHttpRequestObj() {
  // Code for handling obsolete browsers omitted for brevity
  return new XMLHttpRequest();
}

function sendHttpRequest(sURL) {
  if (xmlHttp.readyState == 0 || xmlHttp.readyState == 4) {
    xmlHttp.open("GET", sURL, true);
    xmlHttp.onreadystatechange = handleServerResponse;
    xmlHttp.send();
  } else {
    setTimeout(function() {
      sendHttpRequest(sURL);
    }, 1000);
  }
}

function handleServerResponse() {
  if (xmlHttp.readyState == 4) {
    if (xmlHttp.status == 200) {
      xmlResponse = xmlHttp.responseText;
      handleResponseData(xmlResponse);
    }
  }
}

sendHttpRequest("https://geopingyin.com/gis/Locations.php");

function handleResponseData(JSONData) {
  var obj = JSON.parse(JSONData);
  var output = "";
  for (i in obj.Locations) {
    output += obj.Locations[i].Name + "<br>" + obj.Locations[i].Caption + "<br>" + obj.Locations[i].URL + "<br>" + obj.Locations[i].Thumb_URL +"<br>" + "<br>";
  }
  document.getElementById("results").innerHTML = output
}

<h2>Location List</h2>
<div id="results"></div>

Answer 1

您需要从收到的数据中创建<img>元素并将其附加到DOM：

function handleResponseData(JSONData) {
  var obj = JSON.parse(JSONData);
  var parent = document.getElementById("results");
  for (var i in obj.Locations) {
    var img = document.createElement("img");
    img.src = obj.Locations[i].URL;
    img.setAttribute("title", obj.Locations[i].Name);
    parent.appendChild(img);

    var desc = document.createElement("div");
    desc.textContent = obj.Locations[i].Caption;
    parent.appendChild(desc);
  }
}

一旦你掌握了它，就可以进一步增强：在循环中创建元素时，通常最好将它们附加到DocumentFragment，然后将片段附加到DOM（例如＆＃34） ;完成循环的父＆＃34;元素results id）而不是将每个单独的元素附加到DOM，因为每个这样的操作都会导致reflow - 阻止它可以加速大数据集的过程：

  //var parent = document.getElementById("results");
  var fragment = document.createDocumentFragment();
  for (...) {
    // ...
    fragment.appendChild(img);
  }
  document.getElementById("results").appendChild(fragment);

Answer 2

虽然Tomas是对的，但您需要将带有src的图像标记指向该网址，我将推荐一种不同的方法。

尽可能地解决您的疑虑。如果你想改变你的布局/设计，你真的不想改变javascript。把它放在你的HTML中。

＆＃13;

var xmlHttp = createHttpRequestObj();
function createHttpRequestObj() {
  // Code for handling obsolete browsers omitted for brevity
  return new XMLHttpRequest();
}

function sendHttpRequest(sURL) {
  if (xmlHttp.readyState == 0 || xmlHttp.readyState == 4) {
    xmlHttp.open("GET", sURL, true);
    xmlHttp.onreadystatechange = handleServerResponse;
    xmlHttp.send();
  } else {
    setTimeout(function() {
      sendHttpRequest(sURL);
    }, 1000);
  }
}

function handleServerResponse() {
  if (xmlHttp.readyState == 4) {
    if (xmlHttp.status == 200) {
      xmlResponse = xmlHttp.responseText;
      handleResponseData(xmlResponse);
    }
  }
}

sendHttpRequest("https://geopingyin.com/gis/Locations.php");

function handleResponseData(JSONData) {
  var obj = JSON.parse(JSONData);
  var output = "";
  
  //Set Up the template
  var s = document.getElementById("resultTemplate").innerHTML.trim();
  var holder = document.createElement('div');
  holder.innerHTML = s;
  var boxTemplate = holder.childNodes;
  
  for (i in obj.Locations) {
    //Clone Template    
    var newItem = boxTemplate[0].cloneNode(true);
    //Populate Template Elements
    newItem.querySelector(".name").innerHTML = obj.Locations[i].Name;
    newItem.querySelector(".caption").innerHTML = obj.Locations[i].Caption;
    newItem.querySelector(".image>a").href = obj.Locations[i].URL;
    newItem.querySelector(".image>a>img").src = obj.Locations[i].Thumb_URL;    
    //Add to the doc
    document.getElementById("results").appendChild(newItem);
  }
  
}

＆＃13;

<h2>Location List</h2>
<ul id="results"></ul>
<!-- Ideally we'd use the new <template> tag here but IE support is no good -->
<script type="text/template" id="resultTemplate">
  <li>
    <h1 class="name"></h1>
    <p class="caption">
    <div class="image">
      <a href=""><img src=""></a>
    </div>
  </li>
</script>

＆＃13;

可视化数组中的图像

2 个答案: