在Django中设置分类为URL时遭遇JavaScript错误：预期';'

问题原因 #

你的代码里onclick属性用单引号包裹了location.href的赋值，当{% url 'category' category.category %}生成的URL中包含单引号（比如分类名称是Women's Clothing）时，会直接打断JavaScript的字符串语法，触发“预期';'”的错误。

修复方案 #

方案1：调整引号嵌套+转义处理 #

用Django的escapejs过滤器确保URL中的特殊字符被正确转义，同时先把URL存入变量避免嵌套混乱：

{% for category in all_categories %}
    {% url 'category' category.category as category_url %}
    <div onclick="location.href='{{ category_url|escapejs }}';"
        style="box-shadow:0 5px 30px 0 rgba(0,0,0,.05);"
        class="hover:scale-105 hover:transform transition duration-300 cursor-pointer bg-gray-900 rounded-lg h-40 w-full my-4 text-center p-5 grid place-items-center">
        <div>
            <p class='text-4xl my-2'><i
                    class="bi bi-tags text-transparent bg-clip-text bg-gradient-to-r from-cyan-200 to-blue-500"></i>
            </p>
            <p class='text-base'>{{ category.category }}</p>
        </div>
    </div>
{% endfor %}

方案2：避免内联JavaScript（推荐） #

用data-*属性存储URL，通过外部JS绑定点击事件，彻底规避引号冲突问题：

模板代码：

{% for category in all_categories %}
    <div data-category-url="{% url 'category' category.category %}"
        style="box-shadow:0 5px 30px 0 rgba(0,0,0,.05);"
        class="category-card hover:scale-105 hover:transform transition duration-300 cursor-pointer bg-gray-900 rounded-lg h-40 w-full my-4 text-center p-5 grid place-items-center">
        <div>
            <p class='text-4xl my-2'><i
                    class="bi bi-tags text-transparent bg-clip-text bg-gradient-to-r from-cyan-200 to-blue-500"></i>
            </p>
            <p class='text-base'>{{ category.category }}</p>
        </div>
    </div>
{% endfor %}

JavaScript代码：

document.querySelectorAll('.category-card').forEach(card => {
    card.addEventListener('click', function() {
        location.href = this.dataset.categoryUrl;
    });
});

这种方式既解决了语法错误，也让代码结构更清晰易维护。

内容的提问来源于stack exchange，提问作者tarus