时间戳

首页 > 解决方案 > 导致 JQuery 函数失败的隐藏字符

javascript - 导致 JQuery 函数失败的隐藏字符

问题描述

我试图了解导致简单 jquery 函数失败的原因。它只是查找 ID，用其他数据替换一些内容。我有 $data1、$data2、$data3 作为“...更多”的替换测试数据。替换适用于 $data1 和 $data2，但对 $data3 无效。不幸的是，我需要处理的所有数据都是 $data3 格式的。

测试代码如下：

<?php
  $data1 = '<p>line one text here</p>'; 
  $data2 = '<p>line one text here</p><p>line two text here</p><p>line three text here</p>';
  $data3 = <<<EOF
    <p>line one text here</p>
    <p>line two text here</p>
    <p>line tgree text here</p>
EOF;
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            //To get remainder of article when clicked on "...more"
            $(document).ready(function () {
                $("#more").click(function () {
                    $("#more").html('<?= $data2; ?>');
                    $("#more").css('color', 'black');
                    $("#more").css('cursor', '');
                });
            });
        </script>
    </head>
    <body>
        <p class="card-text"><span id="more" style = "color: blue; cursor:pointer;">...more</span></p>  
    </body>
</html>

查看控制台，我看到 jquery 代码中的数据显示 $data1 和 $data2 的单个连续行，但是，对于 $data3，显然有换行符，这是我怀疑导致失败的原因（脚本什么都不做，没有发生变化）。见下图：

在此处输入图像描述

我如何找出这些隐藏字符是什么造成了问题，以便我可以在提交给 jquery 函数之前删除/替换所有这些字符，或者有没有办法事先在函数中处理它？任何其他见解表示赞赏。

提前致谢！

标签： javascriptphpjquery

解决方案

要解决此问题，您需要在 JS 代码中使用模板文字，即。`用代替'或分隔字符串"。这是因为它们允许字符串文字中的换行符，就像 PHP 所做的那样：

$("#more").html(`<?= $data2; ?>`);

请注意，这在 IE11 及更低版本中不受支持。

或者，您需要在将字符串输出到 JS 之前替换 PHP 中字符串中的换行符。

推荐阅读