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 ...
}

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

完整代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案:

完整代码：