将 HTML 添加到 JQuery 同位素 additems/insertitems

Question

我希望将 html 添加到这个函数中，到目前为止，我有这个，它基本上是一个缩略图网格，用作轮播或相应图像的控件：

<div class="row">
            <div class="col-lg-12 no-pad">
                <h2 class="centre text-uppercase no-margin title-padding white-bg">XXXXX &amp; Demos</h2>
                <div class="grid">
                    <ol id="vid-list" class="text-uppercase image-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="indicator-active">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXXX<br />Commercial</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="1">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXX</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="2">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXX<br />XXXXX</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="3">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXX<br />XXXXX</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="4">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXXX</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="5">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXXX</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="6">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXXX</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="7">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXXX</h4>
                            </div>
                        </li>
                    </ol>
                </div>
            </div>
</div>

和

        $('.button').on( 'click', function() {
            var $items = '<li data-target="#myCarousel" data-slide-to="8">
                            <div class="grid-item" style="display:none;">
                                <img src="img/btn.png">
                                <h4>The lemon tree-short film</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="9">
                            <div class="grid-item" style="display:none;">
                                <img src="img/btn.png">
                                <h4>The lemon tree-short film</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="10">
                            <div class="grid-item" style="display:none;">
                                <img src="img/btn.png">
                                <h4>The lemon tree-short film</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="11">
                            <div class="grid-item" style="display:none;">
                                <img src="img/btn.png">
                                <h4>The lemon tree-short film</h4>
                            </div>
                        </li>';
            $grid.isotope( 'insert', $items);
        }

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

Answer 1

一个字符串不能像这样简单地跨越多行。

为了实现它，您可以在每行的末尾添加一个反斜杠（）以转义换行符。但是这种方法有一个问题，如果你在斜线后面有多余的空格，它会失败，但这种情况很难发现。

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

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

Answer 2

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

function makeDataSlide(slideId, imgSrc, slideTitle) {
  var slide = $('<li data-target="#myCarousel" data-slide-to="'+ slideId +'"></li>');
  var gridItem = $('<div class="grid-item" style="display:none"></div>');
  $(gridItem).append('<img src="'+ imgSrc +'">');
  $(gridItem).append('<h4>'+ slideTitle +'</h4>');
  $(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);
});

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