在 PHP 中声明 jquery 变量的正确方法是什么？

Question

我在我的 WordPress 页面上使用以下脚本来显示更多和更少的阅读内容。

<p class="countcontent">'.$the_content.'</p>

上面的 p 标签处于 for 条件

$data.='<script type="text/javascript">
  
jQuery(document).ready(function(){
var maxLength = 390;
var moretxt = "...Read More";
var lesstxt = "Read Less";
  jQuery(".countcontent").each(function() {

    var myStr = jQuery(this).text();
    if (jQuery.trim(myStr).length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, jQuery.trim(myStr).length);
      jQuery(this).empty().html(newStr);
      jQuery(this).append("<span class="more-text">+ removedStr + </span>");
      jQuery(this).append("<a href="javascript:void(0);" class="read-more more">+ moretxt + </a>");
    }
  });

  jQuery(".read-more").click(function() {
    if(jQuery(this).hasClass("more")){
        jQuery(this).removeClass("more");
        jQuery(this).text(lesstxt);
        jQuery(this).siblings(".more-text").show();
    }
    else {
        jQuery(this).addClass("more");
        jQuery(this).text(moretxt);
        jQuery(this).siblings(".more-text").hide();
    }

  });
});
</script>';

我在这一行遇到了问题

 jQuery(this).append("<span class="more-text">+ removedStr + </span>");
 jQuery(this).append("<a href="javascript:void(0);" class="read-more more">+ moretxt + </a>");

并在控制台中Uncaught SyntaxError: expected expression, got '<'

我添加了这样的变量+ removedStr +和+ moretxt + 。这是在 PHP 中声明 jquery 变量的正确方法吗？

下面的代码是截图。

Answer 1

您在 span 标签中使用了双引号，这太早地关闭了 append() 方法，因为它使用的是相同的引号。 您必须在 jQuery 方法中使用双引号 ("") 或单引号 ('')，并对您附加的包含引号的任何 HTML 代码使用相反的引号。

您还忘记在 JS 变量之前和之后以引号结束和开始内容，这将导致无法将变量内容显示到页面的问题（它将呈现为纯文本）。 下面是有效的 JavaScript 在您的情况下应该是什么样子。

jQuery(this).append('<span class="more-text">' + removedStr + '</span>');

jQuery(this).append('<a href="javascript:void(0);" class="read-more more">' + moretxt + '</a>');

在上面的示例中，双引号已替换为单引号，以允许您在 HTML 内容中使用双引号。 HTML 内容用单引号括起来，以允许 JavaScript 变量按应有的方式转换为 output。

注意，请记住转义 jQuery 中的单引号，就像您的情况一样，它会干扰您的 PHP 标签。

Answer 2

您的某些 jQuery 中的双引号存在语法错误。 它看到双引号，将项目结束到 append 并且下一个字符 > 是意外的。 请参阅 PHP 文档中有关处理字符串和引号的示例： https://www.php.net/manual/en/language.types.string.php

// Outputs: Arnold once said: "I'll be back"
echo 'Arnold once said: "I\'ll be back"';

您的整个 $data 变量包含在一对单引号中。 您需要在 $data 中执行此操作，因为您需要在交替使用引号时对其进行转义，例如：

$data .= '<script type="text/javascript">
  ...
    jQuery(this).append(\'<span class="more-text">+ removedStr + </span>\');
  ...

快速编辑：您尝试使用的变量看起来正确，我只是注意到您的语法问题可能是您所关注的问题。

Answer 3

在 WordPress 中使用 jQuery 时，请考虑以下事项。

jQuery(function($){
  var maxLength = 390;
  var moretxt = "...Read More";
  var lesstxt = "Read Less";
  $(".countcontent").each(function() {
    var myStr = $.trim($(this).text());
    if (myStr.length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, myStr.length);
      $(this).empty().html(newStr);
      $(this).append("<span class='more-text'>" + removedStr + "</span>");
      $(this).append("<a href='javascript:void(0);' class='read-more more'>" + moretxt + "</a>");
    }
  });

  $(".read-more").click(function() {
    if($(this).hasClass("more")){
      $(this).removeClass("more");
      $(this).text(lesstxt);
      $(this).siblings(".more-text").show();
    } else {
      $(this).addClass("more");
      $(this).text(moretxt);
      $(this).siblings(".more-text").hide();
    }
  });
});

如您所见，当使用双引号 ( " ) 时，您将需要使用单引号 ( ' ) 才能包含在字符串中。在您的 SPAN 和 A 字符串中有两点存在问题。您也是使用+运算符而不关闭字符串包装器。

当你使用jQuery(function(){}); ，这是jQuery(document).ready(function(){});的简写。 . 查看更多： https://learn.jquery.com/using-jquery-core/document-ready/

如果您想使用速记并确保它不与其他库冲突，请查看此处： https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/