我不能调用 jQuery，可能是因为语法错误

Question

我正在使用 aBigImage Jquery，当我按照给出的说明进行操作时，我收到一个 500 错误，提示变量“链接”不存在。 你能帮我么？ 以下代码是我写的：

{% block body %}
<div class="page-sidebar">
    {% for link in entity.getSidebarImages() %}
        {% if link.image.isFoto() %}

            <a href="{{ app.request.basepath }}/{{ link.image.getWebPath() }}">

                <img src="{{ app.request.basepath }}/{{ link.image.getWebPath("thumbnail_250") }}" alt="{{ link.image.title }}">

                <div class="sidebar-description">
                    {{ link.image.description|raw }}
                </div>


            </a>

        {% else %}
            <div class="sidebar-item sidebar-link-item">
                <a href="{{ app.request.basepath }}/{{ link.image.webpath }}">

                 <img src="{{ app.request.basepath }}/{{ link.image.getPreview() }}" />
                </a>
                <div class="sidebar-title">
                    <a href="{{ app.request.basepath }}/{{ link.image.webpath }}">
                      {{ link.image.title|raw }}
                    </a>
                </div>
            </div>
        {% endif %}
    {% endfor %}

<script>    
    jQuery('.page-sidebar a').on('click') {
        jQuery(document).ready(function(
        $(  'a[href$="'{{ app.request.basepath }}'/'{{ link.image.getWebPath() }}'"]').abigimage();

    }); 
</script>
</div>
{% endblock %}

{% block body_javascripts %}
    {% javascripts output='aBigImage.js'
    '@CtrlBlnHomepageBundle/Resources/public/js/Minimal-jQuery-Image-Viewer-with-Image-Preloading-ABigImage/abigimage.jquery.min.js'    
    %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

我得到的错误是：

$(  'a[href$="'{{ app.request.basepath }}'/'{{ link.image.getWebPath() }}'"]').abigimage();

我认为是语法错误，但我找不到...谢谢！

Answer 1

您在 for 循环之外引用了 link 变量。

Answer 2

不确定为什么要创建辅助选择器，将其切换到这个应该可以工作

$(function() {
	$('.page-sidebar a').abigimage();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.darkbee.be/abigimage.jquery.min.js"></script>

		<div class="page-sidebar">
			{% for link in entity.getSidebarImages() %}
				{% if link.image.isFoto() %}
					<a href="{{ app.request.basepath }}/{{ link.image.getWebPath() }}">
						<img src="{{ app.request.basepath }}/{{ link.image.getWebPath("thumbnail_250") }}" alt="{{ link.image.title }}">
						<div class="sidebar-description">{{ link.image.description|raw }}</div>
					</a>
				{% else %}
					<div class="sidebar-item sidebar-link-item">
						<a href="{{ app.request.basepath }}/{{ link.image.webpath }}">
							<img src="{{ app.request.basepath }}/{{ link.image.getPreview() }}" />
						</a>
						<div class="sidebar-title">
							<a href="{{ app.request.basepath }}/{{ link.image.webpath }}">
								{{ link.image.title|raw }}
							</a>
						</div>
					</div>
				{% endif %}
			{% endfor %}
		</div>