Symfony 2 的 Twig 模板中的 JavaScript 元素问题答案

【问题标题】：JavaScript element issue in Twig template with Symfony 2Symfony 2 的 Twig 模板中的 JavaScript 元素问题
【发布时间】：2015-12-25 19:24:03
【问题描述】：

我的树枝模板中的 Javascript 元素存在问题。

当站点菜单从 id 样式引用（例如 href = "#terms"）更改为链接到不同页面（例如 href={{ path( '条款') }}。

这是我的 index.html.twig 的一部分

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"/> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title> {% block title %} Test Script {% endblock %}</title> 
        <link rel="shortcut icon" href="{{ asset('favicon.ico') }}"/> 
        {% block stylesheets %} 
            {% stylesheets 'bundles/useruser/css/*' filter='cssrewrite' %} 
            <link rel="stylesheet" href="{{ asset_url }}" type="text/css"/> 
            {% endstylesheets %} 
        {% endblock %} 
        <script type="text/javascript" charset="utf-8" src="//code.jquery.com/jquery-2.1.4.min.js"></script> 
        {% block javascripts %} 
            {% javascripts '@UserUserBundle/Resources/public/js/*' %} 
            <script type="text/javascript" src="{{ asset_url }}"></script> 
            {% endjavascripts %} 
        {% endblock %} 
    </head> 
    <body> 
        {% block body %} 
        <div id="sTop" class="site-main"> 
            <div class="site-header"> 
                <div class="main-header"> 
                    <div class="container"> 
                        <div id="menu-wrapper"> 
                            <div class="row"> 
                                <div class="logo-wrapper col-md-4 col-sm-2 col-xs-8"> 
                                    <h1> 
                                        <a>Travel Flex</a> 
                                    </h1> 
                                </div> 
                                <div class="col-md-8 col-sm-10 col-xs-4 main-menu text-left"> 
                                    <ul class="menu-first hidden-sm hidden-xs"> 
                                        <li class="active"><a href="#">{{ 'About' }}</a></li> 
                                        <li><a href="terms">{{ 'Terms & Conditions' }}</a></li> 
                                        <li><a href="privacy">{{ 'Privacy Policy' }}</a></li> 
                                        <li><a href="#contact">{{ 'Subscribe' }}</a></li> 
                                        <li><a href="unsubscribe">{{ 'Unsubscribe' }}</a></li> 
                                    </ul> 
                                    <a href="#" class="toggle-menu visible-sm visible-xs"><i class="fa fa-bars"></i></a> 
                                </div> 
                            </div> 
                        </div> 
                        <div class="menu-responsive hidden-md hidden-lg"> 
                            <ul> 
                                <li class="active"><a href="#">{{ 'About' }}</a></li> 
                                <li><a href="terms">{{ 'Terms & Conditions' }}</a></li> 
                                <li><a href="privacy">{{ 'Privacy Policy' }}</a></li> 
                                <li><a href="#contact">{{ 'Subscribe' }}</a></li> 
                                <li><a href="unsubscribe">{{ 'Unsubscribe' }}</a></li> 
                            </ul> 
                        </div> 
                    </div> 
                </div> 
            </div> 
            <div class="site-slider"> 
                <div class="slider"> 
                    <div class="flexslider"> 
                        <ul class="slides"> 
                            <li> 
                                <div class="overlay"></div> 
                                <img src="{{ asset('bundles/useruser/images/slide1.jpg') }}" alt=""> 
                                <div class="slider-caption visible-md visible-lg"> 
                                    <h2>test text 1</h2> 
                                    <p>test text 1</p> 
                                </div> 
                            </li> 
                            <li> 
                                <div class="overlay"></div> 
                                <img src="{{ asset('bundles/useruser/images/slide2.jpg') }}" alt=""> 
                                <div class="slider-caption visible-md visible-lg"> 
                                    <h2>test text2</h2> 
                                    <p>test text 2</p> 
                                </div> 
                            </li> 
                            <li> 
                                <div class="overlay"></div> 
                                <img src="{{ asset('bundles/useruser/images/slide3.jpg') }}" alt=""> 
                                <div class="slider-caption visible-md visible-lg"> 
                                    <h2>test text 3</h2> 
                                    <p>test text 3</p> 
                                </div> 
                            </li> 
                        </ul> 
                    </div> <!-- /.flexslider --> 
                </div> <!-- /.slider --> 
            </div> <!-- /.site-slider --> 
        </div> <!-- /.site-main -->

当我使用 href = "#terms" 时，轮播元素加载正常。但是链接不能正常工作（红色矩形中的链接不会重定向到不同的页面）。

当我使用 href={{ path('terms') }} 链接时，它应该可以正常工作，但是没有加载轮播元素。看起来我如何将 js 文件包含到 index.html.twig 中存在问题，但是我不知道如何解决它。以下是来自浏览器控制台的错误：

如有任何帮助，我们将不胜感激

【问题讨论】：

分享你的轮播 jQuery 代码并添加截图以更好地理解
我已经用问题的截图修改了我的原始帖子。第一个屏幕截图是顶部轮播工作正常，但顶部栏上的链接不起作用。第二个轮播 - 链接工作正常，但轮播没有加载。关于 jQuery 代码 - 我正在使用在我之前创建的代码 - 我可以共享整个文件，因为我不确定它的哪个部分说明了轮播本身。谢谢
看起来问题来自这里 - 这就是浏览器控制台的意思
在您的问题中添加控制台错误！
在twigfiddle.com/6hq2s8添加你的代码

标签： javascript jquery symfony twig

【解决方案1】：

如下所示替换包含 jQuery 库代码片段

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

签出其他 jQuery CDN 或将文件保存到您的服务器。

http://www.w3schools.com/jquery/jquery_get_started.asp

为您的滑块图像添加绝对 URL

{{ absolute_url(asset('bundles/useruser/images/slide1.jpg')) }}

【讨论】：

谢谢，但我仍然有同样的问题 Sizzle.error = function( msg ) { throw new Error( "语法错误，无法识别的表达式：" + msg ); };