Uncaught SyntaxError：意外的保留字

Question

我在JQUERY中有以下代码：

var large='<div class="vip" style ="background:url(./uploads/deal/"+data[a].id+"_1.jpg);">
           <span class ="coundtown" value ='+data[a].deal_time_off+' style ="display:none;"></span>
          <script> $(document).ready(function(){ $('+data[a].deal_unique_id+').countdown({ date:'+data[a].deal_time_off+'}); }); </script>
       <div class = "deal_info clearfix">
           <div class = "deal_subject clearfix">
               <a href="./deal/'+data[a].deal_unique_id+'">adsfd</a>
           </div>
           <div style = "clear:both"></div>
           <div class="timer">
             <img class="img" src="./img/stopwatch.png" border="none" />
             <span class ='+data[a].deal_unique_id+'></span>
           </div>
         </div>
         <div class="percent_mini"></div>
     </div>';
        //$("#left_row").append(large);

但是在这条线上：

 <span class ="coundtown" value ='+data[a].deal_time_off+' style ="display:none;">

我收到此错误：

Uncaught SyntaxError：意外的保留字

问题是什么？

var large='<div class="vip" style ="background:url(http://mydeal.ge/uploads/deal/"+data[a].id+"_1.jpg);">
           <span class ="coundtown" value ="'+data[a].deal_time_off+'" style ="display:none;"></span>
          <script> $(document).ready(function(){ $("'+data[a].deal_unique_id+'").countdown({ date:"'+data[a].deal_time_off+'"}); }); </script>
       <div class = "deal_info clearfix">
           <div class = "deal_subject clearfix">
               <a href="http://mydeal.ge/deal/'+data[a].deal_unique_id+'">adsfd</a>
           </div>
           <div style = "clear:both"></div>
           <div class="timer">
             <img class="img" src="http://mydeal.ge/img/stopwatch.png" border="none" />
             <span class ="'+data[a].deal_unique_id+'"></span>
           </div>
         </div>
         <div class="percent_mini"></div>
     </div>';

我修复了此变量，但仍然出现错误

Answer 1

您不能在javascript字符串中包含换行符，而必须将它们转义：

var str1 = "abcd
            efgh";

应该：

var str1 = "abcd\
            efgh";

您的HTML分布在多行中，因此您需要避免换行符：

var large='<div class="vip" style ="background:url(./uploads/deal/"+data[a].id+"_1.jpg);">\
       <span class ="coundtown" value ='+data[a].deal_time_off+' style ="display:none;"></span>\
      <script> $(document).ready(function(){ $('+data[a].deal_unique_id+').countdown({\ date:'+data[a].deal_time_off+'}); }); </script>\
   <div class = "deal_info clearfix">\
       <div class = "deal_subject clearfix">\
           <a href="./deal/'+data[a].deal_unique_id+'">adsfd</a>\
       </div>\
       <div style = "clear:both"></div>\
       <div class="timer">\
         <img class="img" src="./img/stopwatch.png" border="none" />\
         <span class ='+data[a].deal_unique_id+'></span>\
       </div>\
     </div>\
     <div class="percent_mini"></div>\
 </div>';

Answer 2

不要在变量中使用html，更不要在包含html的脚本中使用，因为它最难维护。 您是否应该使用模板（ Handlebars ，下划线，胡须...）。 祝好运！

例如：

    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>

      <title>your title</title>
    </head>
    <body>
     <script id="our-tpl" type="text/x-handlebars-template">
      <div class="vip" style ="background:url(./uploads/deal{{deal_unique_id}}_1.jpg);"> 
        <span class ="coundtown" value="{{deal_time_off}}" style ="display:none;"></span>
        <div class = "deal_info clearfix">
          <div class = "deal_subject clearfix">
            <a href="./deal/{{deal_unique_id}}">adsfd</a>
          </div>
          <div style = "clear:both"></div>
          <div class="timer">
            <img class="img" src="./img/stopwatch.png" border="none" />
            <span class ="{{deal_unique_id}}"></span>
          </div>
        </div>
        <div class="percent_mini"></div>
      </div>
    </script>
    <div class="render"></div>


    <script type="text/javascript">
      var obj = {deal_unique_id: 1, deal_time_off: "This is your count"},
          tpl =  Handlebars.compile(($('#our-tpl').html())),
          $rend = $('.render');
          //render
          $rend.html(tpl(obj));
      $('.vip').ready(function(){ 
        var el = '.'+obj.deal_unique_id;
        $(el).countdown({ date:obj.deal_time_off}); 
      }); 
    </script>

    </body>
    </html>

Answer 3

我认为您可能在value属性的value周围缺少引号。

<span class ="coundtown" value ="'+data[a].deal_time_off+'" style ="display:none;">

注意value="...

编辑-等一下等一下。

除非该字符串全部在一行中，否则您需要将其拆分。

var large='<div class="vip" style ="background:url(./uploads/deal/"+data[a].id+"_1.jpg);"';
    large+='       <span class ="coundtown" value ='+data[a].deal_time_off+' style="display:none;"></span>'
...

您不能在许多不同的行中使用一个字符串。

Uncaught SyntaxError：意外的保留字

问题描述

3 个解决方案

解决方案1
3 2013-04-25 00:41:38

解决方案2
2 2013-04-25 03:48:14

解决方案3
1 2013-04-25 00:36:59

Uncaught SyntaxError：意外的保留字

问题描述

3 个解决方案

解决方案1 3 2013-04-25 00:41:38

解决方案2 2 2013-04-25 03:48:14

解决方案3 1 2013-04-25 00:36:59

解决方案1
3 2013-04-25 00:41:38

解决方案2
2 2013-04-25 03:48:14

解决方案3
1 2013-04-25 00:36:59