Question

我是Javascript的新手，我正在尝试构建一些相对简单的东西。

我有一个HTML文件，其中包含以下div：

<p id="textArea" class = "more">
    <!-- random_text -->
</p>

我想做的是制作一个Javascript函数，它接受这个div中的文本，将其拆分为单词，并且只显示我选择的单词。另外，我想在缩短文本的末尾添加“查看更多”链接，我可以单击该链接以在文本的完整版本和缩短版本之间切换。

我的功能如下：

function expandContent() 
{      
    var showChar = 30;
    var ellipsesText = "...";
    var moreText = "(read more)";
    var lessText = "(read less)";

    $('.more').each(function() 
    {
      var $this = $(this);
      var fullText = $this.text().split(" ");

      if (fullText.length > showChar) {
        var shortText = fullText.slice(0, showChar);
        shortText.push('...');
        shortText = shortText.join(separator=' ');

       $this.data("full", fullText.join(separator=' '))
           .stop()
           .data("state", "shortState")
           .stop()
           .data("short", shortText)
           .stop()
           .html(shortText);

         $('<a />', {
            class: 'record-brief-more-link',
            text: moreText,
            href: '#'
         }).appendTo($this);
      } 

    });

    $(".record-brief-more-link").on('click', function()
    {
      var $text = $(this).closest('.more');
      var state = $text.data("state");
      var linkText = (state == "shortState") ?  lessText : moreText;
      $(this).text(linkText);

      $text.html($text.data((state == "shortState") ? "full" : "short")); 

      $text.data("state", (state == "shortState") ? "fullState" : "shortState");

    });};

问题是，在我点击链接一次后，我按预期获得了全文，但链接不再可见，所以如果我愿意，我无法更改回缩短的文本。有谁知道为什么会这样？

Answer 1

当您回复点击时，您最终会致电：

$text.html($text.data((state == "shortState") ? "full" : "short"));

它取代了包含.more元素的所有内容，包括您之前添加的a标记。

您最好的选择是在重置内容之前分离链接，然后重新附加内容：

var $link = $(this);
var $text = $link.closest('.more');
var state = $text.data("state");
var linkText = (state == "shortState") ?  lessText : moreText;
$link.text(linkText).detach();

$text.html($text.data((state == "shortState") ? "full" : "short")); 
$text.append($link);

function expandContent() {
  var showChar = 30;
  var ellipsesText = "...";
  var moreText = "(read more)";
  var lessText = "(read less)";

  $('.more').each(function() {
    var $this = $(this);
    var fullText = $this.text().split(" ");

    if (fullText.length > showChar) {
      var shortText = fullText.slice(0, showChar);
      shortText.push('...');
      shortText = shortText.join(separator = ' ');

      $this.data("full", fullText.join(separator = ' '))
        .stop()
        .data("state", "shortState")
        .stop()
        .data("short", shortText)
        .stop()
        .html(shortText);

      $('<a />', {
        class: 'record-brief-more-link',
        text: moreText,
        href: '#'
      }).appendTo($this);
    }

  });

  $(".record-brief-more-link").on('click', function() {
    var $link = $(this);
    var $text = $link.closest('.more');
    var state = $text.data("state");
    var linkText = (state == "shortState") ? lessText : moreText;
    $link.text(linkText).detach();

    $text.html($text.data((state == "shortState") ? "full" : "short"));
    $text.append($link);

    $text.data("state", (state == "shortState") ? "fullState" : "shortState");

  });
};

expandContent();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="textArea" class="more">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

首次点击后，Javascript链接消失

1 个答案: