【问题标题】:Syntax error, unrecognized expression语法错误,无法识别的表达式
【发布时间】:2012-10-21 01:35:25
【问题描述】:

我在尝试启动灯箱时不断看到以下错误:

Error: Syntax error, unrecognized expression: /Images/designs/start-large.jpg
  [Break On This Error]     

throw new Error( "Syntax error, unrecognized expression: " + msg );

jquery.js (line 4679)

我正在使用彩盒脚本。这是我的代码:

HTML

<figure>
    <img src="/Images/designs/start.jpg" alt="Old Start Page"> 
    <dl>
        <dt class="strong">Purpose</dt>
            <dd>Original Website Opening</dd>
        <dt class="strong"><a href="/Images/designs/start-large.jpg" class="colorbox">Enlarge</a></dt>          
    </dl>
</figure>

JS

$(function() {
   $('.colorbox').colorbox();
});

我不确定我的代码有什么问题,当我单击链接时,灯箱会打开,但只显示一个 ajax 微调器图像。我在页面上隐藏了一个内联元素,该元素使用上面相同的确切代码正确打开(除了链接是href="#hidden-div")。

什么可能导致这个错误,我该如何解决这个问题?

注意:我使用的是 jQuery 1.8.2 和 Colorbox 1.3.20.1

编辑

这是我网站上的附加代码:

$(function() {

    $('#reload').click(function() { 
location.reload(); //Reloads Page
 });

    $('.slideshow').cycle({
    fx: 'fade',
    timeout: 5000 //Cycles Photos using jQuery Cycle Lite Plugin
});

//Original Code for Colorbox: $('.colorbox').colorbox(); 

$('.colorbox').colorbox({ //Current Colorbox Code
    inline: true
});

});

编辑 2

这是JS Fiddle 注意:我调用 Colorbox 的代码位于 JS 面板的底部。

【问题讨论】:

  • 不要使用缩小的 jQuery 进行开发。
  • 因为:h=h.slice(c.length),c.type=g,c.matches=d);if(!c)break}return b?h.length:h?bc.er. ...很难调试。
  • 将您要调试的内容放在 jsfiddle、http 中,并包含非缩小版本的 jquery,以便更容易调试,
  • 检查 colorbox API 以查看它兼容的 jQuery 版本,并确保您拥有最新的 colorbox 版本
  • 将您要修复的内容放入 jsfiddle 中,以便与他人共享,以便他们帮助您调试问题。同样,包含非缩小版的 jQuery,这样调试会更容易。

标签: javascript jquery colorbox


【解决方案1】:

我找到了解决此问题的方法,其中涉及添加额外代码,虽然不完美,但确实有效。

代码如下:

HTML

<a href="#lightbox1" class="colorbox">Show Lightbox</a>

<!-- Inserted before </body> tag -->
<div class="hide">
 <div id="lightbox1">
  <img src="path.jpg"> 
 </div>
</div>

JS

$(function() {
  $(".colorbox").colorbox({
      inline:true
  });
});

CSS

.hide{
  display: none;
}

【讨论】:

    【解决方案2】:

    在颜色框中打开内联元素的代码应该是:

    $('.colorbox').colorbox({ inline:true }); 
    

    希望这会有所帮助!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-09-20
      • 2013-02-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多