Question

我使用find函数完全确定没有需要转义的引号。放入我的“viewbox”div的html完全是单引号，我用双引号括起来。没有一个例外。当我删除我想要插入的内容，并用一个简单的“测试”替换它时，它工作正常，所以它似乎不是一个库问题，或类似的东西。此外，当我将其保存为html文件时，我试图插入的代码本身也有效。我几乎可以肯定我忽略了什么。我已经尝试过，搜索过并完成了我能想到的一切。这是javascript代码。

编辑：我将所有代码行放在一行上。它是有效的，但它不是渲染引导轮播，而是一次又一次地显示所有图像。

$(document).ready(function () {
$('#aprilissue').click(function () {
$('#viewbox').html(
    "
<div class='row'>
<div class='col-md-2'>
</div>
<div class='col-md-8'>

<center>
<div id='carousel-example-generic' class='carousel slide' data-interval='false'>
  <!-- Wrapper for slides -->
  <div class='carousel-inner'>
    <div class='item active'>
      <img src='img/april/page01.jpg' alt='>
    </div>
<div class='item'>
      <img src='img/april/page02.jpg' alt='>
    </div>
<div class='item'>
      <img src='img/april/page03.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page04.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page05.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page06.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page07.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page08.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page09.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page10.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page11.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page12.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page13.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page14.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page15.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page16.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page17.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page18.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page19.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page20.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page21.jpg' alt='>
    </div>
    <div class='item'>
      <img src='img/april/page22.jpg' alt='>
    </div>
  </div>

  <!-- Controls -->
  <a class='left carousel-control' href='#carousel-example-generic' data-slide='prev'>
    <span class='icon-prev'></span>
  </a>
  <a class='right carousel-control' href='#carousel-example-generic' data-slide='next'>
    <span class='icon-next'></span>
  </a>
</div>
</div>
<div class='col-md-2'>
</div>
</center>
"
    );
});


//when I remove what's above, the code below works.


$('#mayissue').click(function () {
$('#viewbox').html(
"test2"
    );
});
$('#juneissue').click(function () {
$('#viewbox').html(
"test3"
    );
});
$('#julyissue').click(function () {
$('#viewbox').html(
"test4"
    );
});

    });

Answer 1

你不能有多行字符串。

要解决此问题，请使用带连接的单独字符串：

$('#viewbox').html("<div class='row'>" +
               "<div class='col-md-2'>" +
               "</div>") //... etc.

Answer 2

你不能拥有一个跨越多行的单个字符串，为了让它以这样的方式工作你必须做这样的事情

 $('#viewbox').html("<div class='row'>" +
"<div class='col-md-2'>" + .....

说完，我会补充说。不要添加HTML

使用模板或您发布的其他内容。一种非常便宜和简单的方法，它在页面上创建html并使用css将其标记为display：none，然后在JS中重新获取父对象并传递outerHtml。

Answer 3

编写长多行字符串的好方法是在每一行的末尾使用魔术反斜杠\。 JS和你一定很高兴：

$('#viewbox').html("\
    <div class='row'>\
    <div class='col-md-2'>\
    </div>\
    ................ \
    <div class='col-md-2'>\
    </div>\
    </center>\
");

CONCEPT JSFIDDLE DEMO

即使我没有引号可以逃脱，它仍然说我有一个未封闭的字符串（Jquery）

3 个答案: