Adding HTML to JQuery Isotope additems/insertitems

问题

I wish to add html to this function, I have this so far which is basically a grid of thumbnail images which act as a control for a carousel or corresponding images:

<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>

and

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

However, I get a syntax error for the second line?

回答1:

A string cannot simply span multiple lines like this.

In order to achieve it, you can add a backslash () to the end of each line in order to escape the newline character. But this method has the trouble that if you end up with extra white space after your slash it will fail, but this situation can be hard to spot.

My preferred method is to close the string and use a plus sign to concat it with the string on the next line. Like So:

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

回答2:

Try this code (untested, but should be close to right):

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

If you continue to have trouble, please consider accepting the previous answer for mutli-line strings and opening a new question as we have moved quite far from the original scope of this question.

来源：https://stackoverflow.com/questions/34595074/adding-html-to-jquery-isotope-additems-insertitems