Javascript：从拆分字符串 url 加载多个图像

Question

我已经做的是当用户写一些文本时，脚本将它添加到 UTL 并在文本输入框下加载图片。

我想要做的更多是能够按空格分割输入文本（例如A1369 A2453应该被分成两个变量A1369和A2453）并使用这两个变量来加载下面的所有图片输入框。

字符串长度必须是无限的。

我已阅读并尝试了解 javascript split 函数，但尚未成功使用它。

我现在拥有的代码如下：

<script type="text/javascript">
    document.getElementById('btn').onclick = function() {
        var val = document.getElementById('imagename').value,
            src = 'http://s7ondemand6.scene7.com/is/image/MothercareASE/l' + val.toLowerCase() +'_1?&$dw_large_mc$&wid=1059&hei=1272',
            img = document.createElement('img');

        img.src = src;
parentElement.insertBefore(img, parentElement.firstChild);
    }
</script>

如何使用String.prototype.split函数添加拼接？

Answer 1

问题的核心很简单。您必须使用 val.split(" ") 创建字符串数组。然后您可以循环并为每个子字符串创建图像：

var values = val.split(" ");
for(var i=0, l=values.length; i<l; i++) {
   var url = 'http://s7ondemand6.scene7.com/is/image/MothercareASE/l' + values[i].toLowerCase() +'_1?&$dw_large_mc$&wid=1059&hei=1272';
   ... javascript to show image belongs here ...
}

我创建了完整的代码示例。我使用函数将代码分成更小的块。我强烈建议你也这样做。

完整代码：

document.getElementById('btn').onclick = function() {
  var val = document.getElementById('imagename').value;
  document.getElementById('imagename').value = "";
  // turn "XXX XXX" into ["XXX", "XXX]
  var vals = val.split(" ");

  for(var i=0,l=vals.length; i<l; i++) {
    var img = document.createElement('img');
    img.src = createImageUrl(vals[i]);
    addImage(img);
  }

}
/**
  This function adds image to the beginning of image list **/
function addImage(imageElm) {
  var container = document.getElementById("images");
  if(container.firstChild) {
    container.insertBefore(imageElm, container.firstChild);
  }
  else {
    container.appendChild(imageElm);
  }
}
/**
  This function generates correct image URL **/
function createImageUrl(ID) {
  return 'http://s7ondemand6.scene7.com/is/image/MothercareASE/l' + ID.toLowerCase() +'_1?&$dw_large_mc$&wid=1059&hei=1272';
}

img {
  margin: 3px;
  max-width: 300px;
}

<input type="text" id="imagename" /><button id="btn">
Click to show.
</button>
<div id="images">

</div>