Ich möchte den Link "Mehr anzeigen" (wenn geklickt wird, wird der Inhalt angezeigt, der gekürzt / ausgeblendet wurde) nur dann an meinen Absatz anhängen, wenn die Anzahl von X Zeichen übergeben wird.

Zum Beispiel habe ich das Minimum auf 120 Zeichen gesetzt, und der Absatz hat nur 60 Zeichen, daher muss der Link "Mehr anzeigen" nicht angehängt werden.

Wie kann ich das lösen? Der folgende Code funktioniert gut, aber er wird auf jeden Absatz, den ich habe, "mehr anzeigen", auch wenn er kleiner als der Betrag X ist. Was soll ich tun?

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));
});

zurück:

Ich muss das "read more" dynamisch mit (.append-Funktion?) AnhängenÜberprüfen Sie die Zeichen und wenn weniger als der maximale Betrag NICHT angezeigt wird, lesen Sie mehroptional, wenn jemand mit reinem Javascript aufwarten kann, ist dies die bevorzugte Wahl, wenn nicht, kann ich mit einem Code-Refactoring ab meinem obigen Code beginnen.