php - Prestashop 在使用 jquery 多个 css 方法时显示白页

Question

我在 prestashop 1.5主页中使用了一些 jquery 代码，实际上是在 Header.TPL 文件中。

当我使用多个 css 方法（一行中的多个）时，网站不会加载并且会显示白页（就像我们遇到 PHP 语法错误时一样）。

这是代码：

$(document).ready(function(){
     $("#items li").hover(function(){

            $(this).children('a').css({"bottom":"0px","line-height":"120px","font-size":"25px"});

                },function(){

            $(this).children('a').css({"line-height":"25px","bottom":"-110px","font-size":"12px"});

     });
});

但这种方法也有效：

$(document).ready(function(){
     $("#items li").hover(function(){

            $(this).children('a').css("bottom", "0px");
            $(this).children('a').css("font-size", "25px");
            $(this).children('a').css("line-height", "120px");
                },function(){
            $(this).children('a').css("bottom", "-110px");
            $(this).children('a').css("font-size", "12px");
            $(this).children('a').css("line-height", "25px");
     });
});

任何建议将不胜感激。

Answer 1

由于 prestashop 使用 Smarty 作为模板，您不能在一行中使用左右大括号。但是您可以将 {redelim} 用于左花括号 ({)，将 {rdelim} 用于右花括号 (})。

最简单的解决方案是在大括号后插入换行符。这段代码应该可以工作。

$(document).ready(function(){
 $("#items li").hover(function(){

        $(this).children('a').css({
       "bottom":"0px","line-height":"120px","font-size":"25px"
        });

            },function(){

        $(this).children('a').css({
           "line-height":"25px","bottom":"-110px","font-size":"12px"
        });

 });
});