0

我可以像这样加载html

 $('#grid').empty();
  for (i in main_images) {
 $('#grid').append($('<li gallery="'+i+'"><div class="title">'+(titles[i] )+'</div><a href="#" class="zoom"><img src= '+main_images[i]+'/><span></span></a></li>'));
}

但我似乎无法做到这一点。

 <div id="container" boarder ="0">
<ul><li><img src="'+img+'"/></li></ul>
  <span class="button prevButton "></span>
  <span class="button nextButton"></span>
  <span> <a href="#" class="zoom_back"></a></span>
  <span> <a href="#" class="zoom_big"></a></span>
  <span> <a href="#" class="info"></a></span>
  <span> <a href="#" class="info_on"></a></span>
  <span> <a href="#" class="info_box"></a></span>
  <span> <a class="info_box_title">title</a></span>
  <span> <a class="info_box_status">status</a></span>
  <span> <a class="info_box_about"> about about </a></span>
  <span> <a href="#" class="box_counter" ></a></span>
     </div>

我试过了，但它抛出了一个错误

$('#container').empty();
$('#container').append($('<ul><li><img src="'+img+'"/></li></ul>
<span class="button prevButton "></span>
<span class="button nextButton"></span>
<span> <a href="#" class="zoom_back"></a></span>
<span> <a href="#" class="zoom_big"></a></span>
<span> <a href="#" class="info"></a></span>
<span> <a href="#" class="info_on"></a></span>
<span> <a class="info_box"></a></span>
<span> <a class="info_box_title">title</a></span>
<span> <a class="info_box_status">status</a></span>
<span> <a class="info_box_about"> about</a></span>
<span> <a href="#" class="box_counter" ></a></span>
 '));
4

3 回答 3

4

JS 字符串中不能有换行符。除非你用\（在这种情况下它们被忽略，并且好像你的字符串中没有换行符。如果你真的需要在你的字符串中使用换行符，你会使用\n而不是文字换行符）：

$('#container').append('<ul><li><img src="'+img+'"/></li></ul>\
<span class="button prevButton "></span>\
<span class="button nextButton"></span>\
<span> <a href="#" class="zoom_back"></a></span>\
<span> <a href="#" class="zoom_big"></a></span>\
<span> <a href="#" class="info"></a></span>\
<span> <a href="#" class="info_on"></a></span>\
<span> <a class="info_box"></a></span>\
<span> <a class="info_box_title">title</a></span>\
<span> <a class="info_box_status">status</a></span>\
<span> <a class="info_box_about"> about</a></span>\
<span> <a href="#" class="box_counter" ></a></span>\
');
于 2013-08-22T22:30:21.490 回答
1

使用以下代码而不是您的代码。

 $('#grid').append('<li gallery="'+i+'"><div class="title">'+(titles[i] )+'</div><a href="#" class="zoom"><img src= '+main_images[i]+'/><span></span></a></li>');

您正在尝试将 jQuery 选定对象附加到网格。

于 2013-08-22T22:30:06.373 回答
1

您不需要将 HTML 包装在 $() 中，因为它用于选择元素。您已经选择了要附加 HTML 的容器 ID。

此外，要添加新行以更好地组织代码但不一定要在 html 中添加新行，请使用“\”。

$('#container').empty();
$('#container').append('<ul><li><img src="'+img+'"/></li></ul> \
<span class="button prevButton "></span> \
<span class="button nextButton"></span><span> \
<a href="#" class="zoom_back"></a></span> \
<span> <a href="#" class="zoom_big"></a></span> \
<span> <a href="#" class="info"></a></span> \
<span><a href="#" class="info_on"></a></span> \
<span> <a class="info_box"></a></span> \
<span> <a class="info_box_title">title</a></span> \
<span> <a class="info_box_status">status</a></span> \
<span> <a class="info_box_about"> about</a></span> \
<span> <a href="#" class="box_counter" ></a></span>');

http://jsfiddle.net/dF7Wf/1/

于 2013-08-22T22:37:18.207 回答