Question

“ p”已从javascript中删除，但出于结构目的，我需要它们。在文本上运行javascript之后，如何将html标签保留在隐藏/第二个文本块中？

function AddReadMore() {
  //This limit you can set after how much characters you want to show Read More.
  var carLmt = 50;
  // Text to show when text is collapsed
  var readMoreTxt = " ... Read More";
  // Text to show when text is expanded
  var readLessTxt = " Read Less";
  //Traverse all selectors with this class and manupulate HTML part to show Read More
  $(".addReadMore").each(function() {
    if ($(this).find(".firstSec").length)
      return;
    var allstr = $(this).text();
    if (allstr.length > carLmt) {
      var firstSet = allstr.substring(0, carLmt);
      var secdHalf = allstr.substring(carLmt, allstr.length);
      var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span><span class='readMore'  title='Click to Show More'>" + readMoreTxt + "</span><span class='readLess' title='Click to Show Less'>" + readLessTxt + "</span>";
      $(this).html(strtoadd);
    }
  });
  //Read More and Read Less Click Event binding
  $(document).on("click", ".readMore,.readLess", function() {
    $(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent");
  });
}
$(function() {
  //Calling function after Page Load
  AddReadMore();
});

.addReadMore.showlesscontent .SecSec,
.addReadMore.showlesscontent .readLess {
  display: none;
}

.addReadMore.showmorecontent .readMore {
  display: none;
}

.addReadMore .readMore,
.addReadMore .readLess {
  font-weight: bold;
  margin-left: 2px;
  color: blue;
  cursor: pointer;
}

.addReadMoreWrapTxt.showmorecontent .SecSec,
.addReadMoreWrapTxt.showmorecontent .readLess {
  display: block;
}

<div class="addReadMore showlesscontent">
  <p>Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht. Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache
    aussieht.</p>
  <p>Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die Suche im Internet nach "lorem ipsum" macht viele Webseiten sichtbar, wo diese noch immer vorkommen. Mittlerweile gibt es mehrere Versionen des Lorem
    Ipsum, einige zufällig, andere bewusst (beeinflusst von Witz und des eigenen Geschmacks)Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.</p>
  <p>Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht. Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch
    die</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

小提琴乐园：https://jsfiddle.net/jhnr7z8L/
谢谢！

Answer 1

您可以应用递归，以便支持DOM元素的任何嵌套。您可能需要将SecSec类应用于可能更多的元素，这些元素发生在“阅读更多”元素之后，但仍属于.addReadMore DOM树的一部分。

以下是修改您的代码以支持该代码的方法：

function AddReadMore() {
    var carLmt = 50;
    var readMoreTxt = " ... Read more";
    var readLessTxt = " Read less";
    $(".addReadMore").each(function() {
        if ($(this).find(".firstSec").length) return;
        var left = carLmt;

        function recur(elem) {
            $(elem).contents().each(function () {
                var allstr = $(this).text();
                // If breaking point is somewhere deeper within this element, recurse
                if (this.nodeType === 1 && 0 <= left && left <= allstr.length) return recur(this);
                if (left < 0) { // "Read more" was already added. 
                    // Hide all following elements as we backtrack:
                    return this.nodeType === 1 ? $(this).addClass("SecSec") 
                                               : $(this).wrap($("<span>").addClass("SecSec"));
                }
                left -= allstr.length;
                if (left >= 0) return; // Not yet there. Continue with siblings
                // Found the text node that needs to be clipped:
                this.nodeValue = allstr.slice(0, left);
                // Add the remainder of the text in an additional span element, and the link to expand
                $(this).after(
                    $("<span>").addClass("SecSec").text(allstr.slice(left)),
                    $("<span>").addClass("readMore").attr("title", "Click to show more").text(readMoreTxt),
                );
            });
        }
        recur(this);
        // The "read less" link should be at the very end of this element
        $(this).append(
            $("<span>").addClass("readLess").attr("title", "Click to show less").text(readLessTxt)
        );
    });
    //Read More and Read Less Click Event binding
    $(document).on("click", ".readMore,.readLess", function() {
        $(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent");
    });
}
$(function() {
    //Calling function after Page Load
    AddReadMore();
    $("#html").text($(".addReadMore").html());
    $("button").click(function () {
        $("#html").toggle();
    });
});

.addReadMore.showlesscontent .SecSec,
.addReadMore.showlesscontent .readLess {
    display: none;
}
.addReadMore.showmorecontent .readMore {
    display: none;
}
.addReadMore .readMore,
.addReadMore .readLess {
    font-weight: bold;
    margin-left: 2px;
    color: blue;
    cursor: pointer;
}
.addReadMoreWrapTxt.showmorecontent .SecSec,
.addReadMoreWrapTxt.showmorecontent .readLess {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>toggle HTML</button>
<pre id="html" style="display:none"></pre>
<div class="addReadMore showlesscontent">
<p>Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht. Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht.</p>
<p>Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die Suche im Internet nach "lorem ipsum" macht viele Webseiten sichtbar, wo diese noch immer vorkommen. Mittlerweile gibt es mehrere Versionen des Lorem Ipsum, einige zufällig, andere bewusst (beeinflusst von Witz und des eigenen Geschmacks)Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.</p>
<p>Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht. Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die</p>
</div>

就像您自己的代码一样，此版本也不会删除节点，因此将存在于它们上的任何事件处理程序都保持活动状态。

Answer 2

我会将完整的HTML存储到data-属性中，并按需恢复它。

演示：

var textCollapser = {
  charLimit: 400,
  readMoreTxt: ' ... Read More',
  readLessTxt: ' Read Less',
  
  collapse: function ($element) {
    // Do nothing if the text doesn't exceed character limit
    if ($element.text().length <= this.charLimit) {
      return;
    }
    // Store the current HTML into a data- attribute if it wasn't already
    $element.data('fullHtml', $element.data('fullHtml') || $element.html());
    // Collapse on char limit and remove any HTML "remains"
    $element.html($element.html()
      .substring(0, this.charLimit)
      .replace(/<[a-z]*\s*$|[a-z]*\s*\/?>$/i, '')
    );
    // Add the read more action to the last paragraph
    var $lastParagraph = $element.find('p:last');
    $lastParagraph = $lastParagraph.length ? $lastParagraph : $element;
    $lastParagraph.append($('<a>').addClass('readMore').text(this.readMoreTxt));
  },

  expand: function ($element) {
    // Restore the full HTML
    $element.html($element.data('fullHtml'));
    // Add the read less action to the last paragraph
    var $lastParagraph = $element.find('p:last');
    $lastParagraph = $lastParagraph.length ? $lastParagraph : $element;
    $lastParagraph.append($('<a>').addClass('readLess').text(this.readLessTxt));
  }
};

$(function () {
  $('.addReadMore').each(function () {
    textCollapser.collapse($(this));
  });
  
  $('.addReadMore').on('click', '.readMore', function () {
    textCollapser.expand($(this).closest('.addReadMore'));
  });
  
  $('.addReadMore').on('click', '.readLess', function () {
    textCollapser.collapse($(this).closest('.addReadMore'));
  });
});

.addReadMore .readMore,
.addReadMore .readLess {
  font-weight: bold;
  margin-left: 2px;
  color: blue;
  cursor: pointer;
}

<div class="addReadMore">
  <p>Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht. Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache
    aussieht.</p>
  <p>Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die Suche im Internet nach "lorem ipsum" macht viele Webseiten sichtbar, wo diese noch immer vorkommen. Mittlerweile gibt es mehrere Versionen des Lorem
    Ipsum, einige zufällig, andere bewusst (beeinflusst von Witz und des eigenen Geschmacks)Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.</p>
  <p>Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht. Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch
    die</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

正如@trincot所指出的那样，请注意，通过“简单”地执行此操作，字符限制将不会精确到100％，因为它会切入HTML标记本身。看看@trincot的答案，严格来说就是这样。

javascript函数删除html部分

2 个答案: