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

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

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

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

// Change it to red
canvas.style.backgroundColor = "#ff0000";

// Change it to the value of a text input
canvas.style.backgroundColor = document.getElementById("myTextInput").value;

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

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

将HTML添加到JQuery Isotope additems / insertitems

2 个答案: