0

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

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
4

2 回答 2

0

如果无法将图片文件加载为 JSON，可以尝试在换行符处拆分：

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

这会将图像标记内的每个图像 url 附加到具有 id 库的 DIV。您可能想要更改 HTML 以使其执行或看起来像您想要的那样。

注意：这假设您使用的是 jQuery

编辑：以最简单的形式，整个 HTML 将如下所示。这就是我测试上面的代码并得到结果的方式。它假定“pics.txt”与 HTML 文件位于同一目录中。编辑位置（ in$.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>
于 2013-07-18T01:13:14.003 回答
0

将这些链接放在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.."
]
}

PS 始终使用 JSON 或 XML 格式进行数据通信。而 JSON 要好得多。

于 2013-07-18T01:07:42.150 回答