Javascript 链接在第一次点击后消失

Question

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

我有一个包含以下 div 的 HTML 文件:

<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>