查看源代码时如何使代码在单行中？

Question

我正在尝试创建一个动态添加输入的按钮，由于我使用的是 Zend 框架，因此我使用此方法从表单文件中获取输入：<?php echo $this->formm->getElement('refA'); ?>

但我收到此错误：Uncaught SyntaxError: Unexpected identifier

那个添加按钮的jquery函数是：

$(document).ready(function (){
    var j = "<?php echo $this->formm->getElement('refA'); ?>";
    $("#add-more").click(function(){   
        $(".row").append(j);
    });
});

当我点击那个错误时，它会告诉我哪里有错误，它似乎在使用：

$(document).ready(function (){
    var j = "<label for="refA" class="optional">Article:</label>
             <select name="refA" id="refA" class="form-control">
               <option value="test1" label="test1">test1</option>
             </select>";
    $("#add-more").click(function(){   
        $(".row").append(j);
    });  
});

是否可以在单行中生成代码，以便我可以使按钮工作？

Answer 1

看起来这是一个引用问题 - PHP 在其中插入的数据有双引号，会不断终止您的字符串。尝试用单引号括起来 - 使用 refA 转义：

$(document).ready(function (){
    var j = '<?php echo $this->formm->getElement(\'refA\'); ?>';
    $("#add-more").click(function(){   
        $(".row").append(j);
    });
});

好的，在进行更多挖掘之后，您需要在它之前删除那些引号和空格。不幸的是，我不是 PHP 人 - 所以我希望语法是正确的 - 想法是从 refA 获取数据并将其存储在 $message 中 - 然后去掉任何空格并转义任何引号，然后回显要设置为'j'的值：

$(document).ready(function (){
   var j = '<?php $message = $this->formm->getElement("refA"); $message = preg_replace("/\r?\n/", "\\n", addslashes($message));echo $message?>'
   $("#add-more").click(function(){   
       $(".row").append(j);
   });
});

在此处找到的 PHP 方法： https://www.the-art-of-web.com/php/javascript-escape/

另一个完全解决问题的选项是使用 es6 - 模板字符串（反引号）

$(document).ready(function (){
    var j = `<?php echo $this->formm->getElement("refA"); ?>`;
    $("#add-more").click(function(){   
        $(".row").append(j);
    });
});

大多数现代浏览器都会原生处理 es6 Template Strings

Answer 2

正如 Kyle 所说，您遇到了引用问题。但是，与他所说的不同，引号 inside PHP 标签 不得 转义，因为它们是在服务器端呈现的。

这应该可以解决问题：

window.onload = function() {
    $(document).ready(function (){
        var j = '<?php echo  preg_replace("/\r|\n/", "", $this->formm->getElement('refA')); ?>';
        $("#add-more").click(function(){   
            $(".row").append(j);
        });
    });
}

编辑：查看您的屏幕截图和其他 cmets，您似乎正在尝试在加载之前访问 jQuery ($)（我想您正在加载所有 JS 依赖项布局）。 由于您不能在 JS 文件中使用 PHP 代码，因此您有两种选择：

1. 您在模板 (ajouter.phtml) 中创建一个 JS 变量，例如 var inputTemplate = <?php echo preg_replace(....);?>;，然后在您的 JS 文件中使用该变量
2. 您确保 that JS sn-p 仅在页面完全加载时执行（因此使用 window.onload = function(){}

就个人而言，我建议您使用第一个选项。在 phtml 中插入 JS 代码在概念上是错误的，因为如果你决定不再使用 jQuery，你就不必进入所有模板来找到那些 sn-ps。