主页 / 问题 / 775642
Accepted
Sevastopol'
Asked:2020-01-26 00:01:48 +0000 UTC2020-01-26 00:01:48 +0000 UTC

如何隐藏部分文字？

  • 772

你好。请帮助我修复隐藏部分长文本的脚本中的错误。也就是说，如果文本中有段落，那么他会忽略它们或将它们隐藏在第一个之后，或者以他喜欢的任何其他方式。如果文本是实心的，没有段落，那么脚本可以正常工作。还有一件事，如何教脚本使其隐藏点之后的文本，而不是在句子的中间？谢谢！

(function($) {
  $.fn.truncate = function(options) {

    var defaults = {
      length: 100,
      minTrail: 10,
      moreText: "",
      lessText: "",
      ellipsisText: ""
    };

    var options = $.extend(defaults, options);

    return this.each(function() {
      obj = $(this);
      var body = obj.html();

      if (body.length > options.length + options.minTrail) {
        var splitLocation = body.indexOf(' ', options.length);
        if (splitLocation != -1) {

          var splitLocation = body.indexOf(' ', options.length);
          var str1 = body.substring(0, splitLocation);
          var str2 = body.substring(splitLocation, body.length - 1);
          obj.html(str1 + '<span class="truncate_ellipsis">' + options.ellipsisText +
            '</span>' + '<span  class="truncate_more">' + str2 + '</span>');
          obj.find('.truncate_more').css("display", "none");

          obj.append(
            '<div class="clearboth">' +
            '<a href="#" class="truncate_more_link">' + options.moreText + '</a>' +
            '</div>'
          );

          var moreLink = $('.truncate_more_link', obj);
          var moreContent = $('.truncate_more', obj);
          var ellipsis = $('.truncate_ellipsis', obj);
          moreLink.click(function() {
            if (moreLink.text() == options.moreText) {
              moreContent.show('normal');
              moreLink.text(options.lessText);
              ellipsis.css("display", "none");
            } else {
              moreContent.hide('normal');
              moreLink.text(options.moreText);
              ellipsis.css("display", "inline");
            }
            return false;
          });
        }
      }

    });
  };
})(jQuery);

$().ready(function() {
  $('.story').truncate({
    length: 20,
    minTrail: 10,
    moreText: 'Подробнее',
    lessText: 'Скрыть',
    ellipsisText: "[...]"
  });
});
.story {
  margin: 0 0 20px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="story">В этом блоке нет параграфов. Однажды осенью матушка варила в гостиной медовое варенье, а я, облизываясь, смотрел на кипучие пенки. Батюшка у окна читал Придворный календарь, ежегодно им получаемый. Эта книга имела всегда сильное нљ него влияние: никогда
  не перечитывал он ее без особенного участия, и чтение это производило в нем всегда удивительное волнение желчи. Матушка, знавшая наизусть все его свычаи и обычаи, всегда старалась засунуть несчастную книгу как можно подалее, и таким образом Придворный
  календарь не попадался ему на глаза иногда по целым месяцам. Зато, когда он случайно его находил, то, бывало, но целым часам не выпускал уж из своих рук. Итак, батюшка читал Придворный календарь, изредка пожимая плечами и повторяя вполголоса: «Генерал-поручик!..
  Он у меня в роте был сержантом!.. Обоих российских орденов кавалер!. А давно ли мы...» Наконец батюшка швырнул календарь на диван и погрузился в задумчивость, не предвещавшую ничего доброго.</div>
<div class="story">
  <p>В этом блоке есть параграфы.</p>
  <p>Однажды осенью матушка варила в гостиной медовое варенье, а я, облизываясь, смотрел на кипучие пенки. Батюшка у окна читал Придворный календарь, ежегодно им получаемый.</p>
  <p>Эта книга имела всегда сильное нљ него влияние: никогда не перечитывал он ее без особенного участия, и чтение это производило в нем всегда удивительное волнение желчи.</p>
  <p>Матушка, знавшая наизусть все его свычаи и обычаи, всегда старалась засунуть несчастную книгу как можно подалее, и таким образом Придворный календарь не попадался ему на глаза иногда по целым месяцам. Зато, когда он случайно его находил, то, бывало,
    но целым часам не выпускал уж из своих рук.</p>
  <p>Итак, батюшка читал Придворный календарь, изредка пожимая плечами и повторяя вполголоса: «Генерал-поручик!.. Он у меня в роте был сержантом!.. Обоих российских орденов кавалер!. А давно ли мы...» Наконец батюшка швырнул календарь на диван и погрузился
    в задумчивость, не предвещавшую ничего доброго.</p>
</div>

javascript

1 个回答

  1. Best Answer

    要隐藏点之后的文本，您需要寻找点，而不是像现在这样的空格。

    为了不仅将脚本与文本一起使用，而且还与包含标签的文本一起使用，需要对其进行大量修改。

    1. 不要使用.html();，它将 html 作为文本返回。在这种情况下，您可能会不小心将标签切成两半。

    2. 您可以考虑具有类的元素story及其以树形式的子 元素在此处输入图像描述

    3. 在这种形式中，可以将所需子串所在的节点划分为需要显示和需要隐藏的节点，同时添加一个带有 的服务元素...，将所有与右边相邻的节点放入需要隐藏的元素中 在此处输入图像描述

    4. 确定要共享的节点的函数的实现示例可以是以下函数find

      function find(container, text, minLength) {
  var curIndex = 0;

  // обход дерева в глубину
  for (var nodes = Array.from(container.childNodes); nodes.length;) { 
    var node = nodes.shift();
    if (node.nodeType == Node.ELEMENT_NODE) { // если не дошли до нижнего уровня спускаемся дальше
      nodes.unshift(...node.childNodes);
      continue;
    }
    // определяем наличием искомой строки в текущем узле
    var index = -1;
    do {
      index = node.textContent.indexOf(text, index + 1);
    } while (index != -1 && curIndex + index < minLength);

    // если строка найдена и соблюдено условие минимальной показываемой длины
    if (index != -1) {
      curIndex += index;
      return [node, index]; // возвращаем найденный узел и индекс, по которому его надо разделить
    } else {
      curIndex += node.textContent.length;
    }
  }
  return [null, -1];
}

    5. 得到节点和分割点后，需要将文本内容分割成两部分：需要显示的内容和需要隐藏的内容。在节点本身中，只保留可见的部分。

    6. 添加到当前服务节点的右侧[...]

    7. 在右侧添加一个隐藏的文本节点。

    8. 上一层，把右边的所有元素放到负责隐藏文本的节点中

    9. 重复第 8 点，直到我们上升到容器本身——一个具有类的元素.story

    最终实现示例：

    (function($) {
  $.fn.truncate = function(options) {

    var defaults = {
      length: 100,
      minTrail: 10,
      moreText: "",
      lessText: "",
      ellipsisText: ""
    };

    var options = $.extend(defaults, options);

    function find(container, text, minLength) {
      var curIndex = 0;

      for (var nodes = Array.from(container.childNodes); nodes.length;) {
        var node = nodes.shift();
        if (node.nodeType == Node.ELEMENT_NODE) {
          nodes.unshift(...node.childNodes);
          continue;
        }
        var index = -1;
        do {
          index = node.textContent.indexOf(text, index + 1);
        } while (index != -1 && curIndex + index < minLength);

        if (index != -1) {
          curIndex += index;
          return [node, index];
        } else {
          curIndex += node.textContent.length;
        }
      }
      return [null, -1];
    }

    return this.each(function() {
      var obj = $(this);
      var body = this.textContent;

      if (body.length > options.length + options.minTrail) {
        var textToFind = '.';
        if (body.indexOf(textToFind, options.length) != -1) {

          var [node, startIndex] = find(this, textToFind, options.length);
          var splitLocation = startIndex + textToFind.length;

          var str1 = node.textContent.substring(0, splitLocation);
          var str2 = node.textContent.substring(splitLocation + 1);

          node.textContent = str1;

          if (str2.length) {
            $(node).after(`<span  class="truncate_more">${str2}</span>`);
          }

          $(node).after(`<span class="truncate_ellipsis">${options.ellipsisText}</span>`);

          var oi = 0;
          while (node != this) {
            var span = $('<span>').addClass('truncate_more');
            for (var nextNode = node.nextSibling, savedNode; nextNode; nextNode = savedNode) {
              if (nextNode.classList && (nextNode.classList.contains('truncate_more') || nextNode.classList.contains('truncate_ellipsis'))) continue;

              savedNode = nextNode.nextSibling;
              span.append(nextNode);
            }
            node = node.parentNode;
            $(node).append(span);
          }

          obj.find('.truncate_more').css("display", "none");

          obj.append(
            '<div class="clearboth">' +
            '<a href="#" class="truncate_more_link">' + options.moreText + '</a>' +
            '</div>'
          );

          var moreLink = $('.truncate_more_link', obj);
          var moreContent = $('.truncate_more', obj);
          var ellipsis = $('.truncate_ellipsis', obj);
          moreLink.click(function() {
            if (moreLink.text() == options.moreText) {
              moreContent.show('normal');
              moreLink.text(options.lessText);
              ellipsis.css("display", "none");
            } else {
              moreContent.hide('normal');
              moreLink.text(options.moreText);
              ellipsis.css("display", "inline");
            }
            return false;
          });
        }
      }

    });
  };
})(jQuery);

$().ready(function() {
  $('.story').truncate({
    length: 20,
    minTrail: 10,
    moreText: 'Подробнее',
    lessText: 'Скрыть',
    ellipsisText: "[...]"
  });
});
    .story {
  margin: 0 0 20px 0;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="story">В этом блоке нет параграфов. Однажды осенью матушка варила в гостиной медовое варенье, а я, облизываясь, смотрел на кипучие пенки. Батюшка у окна читал Придворный календарь, ежегодно им получаемый. Эта книга имела всегда сильное нљ него влияние: никогда
  не перечитывал он ее без особенного участия, и чтение это производило в нем всегда удивительное волнение желчи. Матушка, знавшая наизусть все его свычаи и обычаи, всегда старалась засунуть несчастную книгу как можно подалее, и таким образом Придворный
  календарь не попадался ему на глаза иногда по целым месяцам. Зато, когда он случайно его находил, то, бывало, но целым часам не выпускал уж из своих рук. Итак, батюшка читал Придворный календарь, изредка пожимая плечами и повторяя вполголоса: «Генерал-поручик!..
  Он у меня в роте был сержантом!.. Обоих российских орденов кавалер!. А давно ли мы...» Наконец батюшка швырнул календарь на диван и погрузился в задумчивость, не предвещавшую ничего доброго.</div>
<div class="story">
  <p>В этом блоке есть параграфы.</p>
  <p>Однажды осенью матушка варила в гостиной медовое варенье, а я, облизываясь, смотрел на кипучие пенки. Батюшка у окна читал Придворный календарь, ежегодно им получаемый.</p>
  <p>Эта книга имела всегда сильное нљ него влияние: никогда не перечитывал он ее без особенного участия, и чтение это производило в нем всегда удивительное волнение желчи.</p>
  <p>Матушка, знавшая наизусть все его свычаи и обычаи, всегда старалась засунуть несчастную книгу как можно подалее, и таким образом Придворный календарь не попадался ему на глаза иногда по целым месяцам. Зато, когда он случайно его находил, то, бывало,
    но целым часам не выпускал уж из своих рук.</p>
  <p>Итак, батюшка читал Придворный календарь, изредка пожимая плечами и повторяя вполголоса: «Генерал-поручик!.. Он у меня в роте был сержантом!.. Обоих российских орденов кавалер!. А давно ли мы...» Наконец батюшка швырнул календарь на диван и погрузился
    в задумчивость, не предвещавшую ничего доброго.</p>
</div>

    • 18

相关问题