javascript - 仅当满足设置的字符数时，才将 "show more"链接附加到 chop 的段落

Question

只有在传递了 X 个字符的情况下，我才想将“显示更多”链接(如果单击将显示已 trim/隐藏的内容)附加到我的段落。

例如，我将最小字符数设置为 120 个字符，而该段落只有 60 个字符，因此我不需要附加“显示更多”链接。

我该如何解决？下面的代码效果很好，但即使少于 X 数量，也会对我拥有的任何段落应用“显示更多”。我该怎么办？

https://jsfiddle.net/vm0uj7fc/1/

    var charLimit = 122;

function truncate(el) {
  var clone = el.children().first(),
      originalContent = el.html(),
      text = clone.text();
  el.attr("data-originalContent", originalContent);
  clone.text(text.substring(0, charLimit) + "...")
  el.empty().append(clone);
}

function reveal(el) {
  el.html(el.attr("data-originalContent"));
}

$("a").on("click", function (e) {
  e.preventDefault();
  var truncateElement = $(this).parent().prev().find(".truncate");
  if ($(this).text() === "Read More") {
      $(this).text("Read Less");
      reveal(truncateElement);
  } else {
      $(this).text("Read More");
      truncate(truncateElement);
  }
});

$(".truncate").each(function () {
    truncate($(this));
});

回顾一下:

• 我需要使用(.append 函数？)动态地附加“阅读更多”
• 检查字符，如果小于最大数量则不显示阅读更多
• 可选，如果有人能想出纯 Javascript，那将是首选，否则我同意从我上面的代码开始进行一些代码重构

Answer 1

我写了一个纯 javascript 来处理您的请求，请看这里的演示:https://jsfiddle.net/IA7medd/751sLn0n/

HTML:

<div class="container">
      <div class="events-left-col">
        <h2 class="eventTitle">Event Title</h2>
          <div class="wrap">
            <div class="truncate">
              <p class="toggledText">
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
                  tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
                  quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
                  consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
                  consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
                  odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait 
                  nulla facilisi.
              </p>
            </div>
          </div>

          <div class="wrap">
            <div class="truncate">
              <p class="toggledText">
                  Not enough characters here to show/append the "Read more" link
              </p>

            </div>
          </div>

           <div class="wrap">
            <div class="truncate">
              <p class="toggledText">
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
                  tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
                  quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
                  consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
                  consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
                  odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait 
                  nulla facilisi.
              </p>
            </div>
          </div>


        </div>
      </div>

风格:

.toggledText span.trimmed{
  display:none;
}
.read-more .more:before{
  content:'Read More';
}
.showAll .toggledText span.morePoints{
  display:none;
}
.showAll .toggledText span.trimmed{
  display:inline;
}
.showAll .read-more .more:before{
  content:'Read Less';
}

脚本:

var charLimit = 120;

        var numberOfToggled = document.getElementsByClassName('toggledText');
        for(i=0; i<numberOfToggled.length; i++){

            var el = numberOfToggled[i];
            var elText = el.innerHTML.trim();

            if(elText.length > charLimit){
                var showStr = elText.slice(0,charLimit);
                var hideStr = elText.slice(charLimit);
                el.innerHTML = showStr + '<span class="morePoints">...</span> <span class="trimmed">' + hideStr + '</span>';
                el.parentElement.innerHTML = el.parentElement.innerHTML + "<div class='read-more'><a href='#' class='more'></a>";
            }

        }

        window.onclick = function(event) {
            if (event.target.className == 'more') {
                event.preventDefault();
                event.target.parentElement.parentElement.classList.toggle('showAll');

            }
        }

---

我还对您的代码进行了一些修改，并且运行良好。你可以在这里看到它:https://jsfiddle.net/IA7medd/j78L76qj/ (如果你需要的话)