将HTML添加到JQuery Isotope附加项/插入项 [英] Adding HTML to JQuery Isotope additems/insertitems

问题描述

我想在此功能中添加html，到目前为止，我基本上已经将其作为缩略图的网格，用作旋转木马或相应图像的控件:

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>

和

        $('.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?

推荐答案

字符串不能像这样简单地跨越多行.

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

这篇关于将HTML添加到JQuery Isotope附加项/插入项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！