Question

现在我有JavaScript函数使用此代码但需要帮助用我存储在txt文件中的图像链接替换div 所以我不想改变<div id="GALLERY">里面的数据我在txt文件中逐行存储了链接。还需要帮助在开头添加'<img src="'，并在pics.txt加载到div中的每一行末尾添加">

txt文件名为pics.txt

<div id="GALLERY">
</div>

这是pics.txt的样子

http://www.clearviewarts.com/thumbnails/Pug.jpg
http://www.clearviewarts.com/thumbnails/BabyIndy.jpg
http://www.clearviewarts.com/thumbnails/CanusAngelicus.jpg
http://www.clearviewarts.com/thumbnails/Puppy%20In%20Basket.jpg
http://www.clearviewarts.com/thumbnails/Wagner-edit1.jpg
http://www.clearviewarts.com/thumbnails/HarlequinDane.jpg

Answer 1

将这些链接放在 JSON 格式的文件中，以便您轻松解析。

假设您已经知道AJAX。因此，使用AJAX加载此文件表单服务器。

以下是jQuery的代码示例。

//urls.json is the file used to store those links
$.getJSON('urls.json', function(data) {
   //just Google how to parse JSON with javascript. It is quite easy 
   //Then you can put the links in an array
});

这是JSON文件格式

{
"links": [
"http://www.clearviewarts.com/thumbnails/Pug.jpg",
"http://www.clearviewarts.com/thumbnails/BabyIndy.jpg",
"and so on.."
]
}

<强> P.S。始终使用JSON或XML格式进行数据通信。而且JSON要好得多。

Answer 2

如果您无法将图片文件作为JSON加载，可以尝试将其拆分为新行字符：

$.get('pics.txt', function(data) {
  $.each(data.split('\n'), function(i, d) {
     $('#gallery').append('<img src="'+d+'"><br>');
  });
});

这会将图像标记内的每个图像网址附加到带有ID库的DIV。您可能希望更改HTML以使其显示或看起来像您想要的。

注意：这假设你正在使用jQuery

编辑：在最简单的形式中，整个HTML将如下所示。这就是我测试上面代码的方法，并得到了结果。它假定'pics.txt'与HTML文件位于同一目录中。编辑位置（在$.get('pic/location/pics.txt'等中。它使用Google托管的jQuery版本。

<html>
<head></head>
<body>

<div id="gallery"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$.get('pix.txt', function(data) {
  $.each(data.split('\n'), function(i, d) {
        $('#gallery').append('<img src="'+d+'"><br>');
  });
});

</script>
</body>    
</html>

使用JavaScript将txt文件加载到div

2 个答案: