将 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

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

为了实现，可以在每行末尾加一个反斜杠()，以转义换行符。但是这个方法有一个问题，如果你在斜杠后面有多余的白色space，它就会失败，但这种情况很难被发现。

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

'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);
});

如果您仍然遇到问题，请考虑接受之前对 mutli-line 字符串的回答并提出一个新问题，因为我们已经远离了这个问题的原始范围。

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

Adding HTML to JQuery Isotope additems/insertitems

javascript

jquery

jquery-isotope