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

Posted 2023-02-24

【中文标题】即使我没有引号可以转义，它仍然说我有一个未闭合的字符串（Jquery）

【英文标题】：Even when I have no quotes to escape, it still says I have an unclosed string (Jquery)

【发布时间】：2014-09-01 01:02:16

【问题描述】：

我使用了 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"
    );
);

    );

【问题讨论】：

JavaScript 不支持多行字符串。

您的字符串无效，因为除非转义，否则不允许换行

如果为了美观你绝对必须保留字符串的换行符，请用" blablabla " +包裹每一行

或者只是在需要时将页面片段 ajax

@user3774582 您可以在每一行的末尾附加一个backslash，这应该可以解决您的问题。然而，展望未来，我们希望摆脱像那样处理长字符串。

【参考方案1】：

你不能有多行字符串。

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

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

【参考方案2】：

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

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

话虽如此，我会补充。不要以这种方式添加 HTML

使用模板或您发布的任何其他内容。在页面上创建html并使用css将其标记为display：none，然后在JS中引用父对象并传递outerHtml。

【讨论】：

我不知道“动态html构建”是否意味着使用js创建大量的html代码......

【参考方案3】：

编写长多行字符串的一个好方法是在每一行的末尾使用神奇的反斜杠\。 JS，你，会很开心：

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

CONCEPT JSFIDDLE DEMO