将HTML添加到JQuery Isotope additems / insertitems

我希望将html添加到此函数中，到目前为止，我有这个基本上是缩略图的网格，它充当旋转木马或相应图像的控件：

 
 
XXXXX & Demos
 
 
 
 
  
XXXXXX
Commercial
 
 
 
 
  
XXXXX
 
 
 
 
  
XXXXX
XXXXX
 
 
 
 
  
XXXXX
XXXXX
 
 
 
 
  
XXXXXX
 
 
 
 
  
XXXXXX
 
 
 
 
  
XXXXXX
 
 
 
 
  
XXXXXX
 
 
 
 
 
  

和

  $('.button').on( 'click', function() { var $items = '
 
  
The lemon tree-short film
 
 
 
 
  
The lemon tree-short film
 
 
 
 
  
The lemon tree-short film
 
 
 
 
  
The lemon tree-short film
 
 
'; $grid.isotope( 'insert', $items); } 

但是，我得到第二行的语法错误？

Answer 1

字符串不能简单地跨越这样的多行。

为了实现它，您可以在每行的末尾添加反斜杠（）以转义换行符。 但是这种方法有一个问题，如果你在斜线后最终得到额外的空白区域就会失败，但这种情况很难发现。

我首选的方法是关闭字符串并使用加号将其与下一行的字符串连接起来。 喜欢如此：

 'String on line 1'+ 'String on line 2'+ 'etc...' 

Answer 2

试试这段代码（未经测试，但应该接近右边）：

 function makeDataSlide(slideId, imgSrc, slideTitle) { var slide = $('
'); var gridItem = $('
'); $(gridItem).append(''); $(gridItem).append('
'+ slideTitle +'
'); $(slide).append(gridItem); return slide; } $('.button').on( 'click', function() { var $items = [ makeDataSlide(8, 'img/btn.png', 'The lemon tree-short film'), makeDataSlide(9, 'img/btn.png', 'The lemon tree-short film'), makeDataSlide(10, 'img/btn.png', 'The lemon tree-short film'), makeDataSlide(11, 'img/btn.png', 'The lemon tree-short film'), ] $grid.isotope( 'insert', $items); }); 

如果您仍然遇到问题，请考虑接受以前的多线字符串答案并打开一个新问题，因为我们已经远离此问题的原始范围。