dopisz link "pokaż więcej" do obciętego akapitu tylko wtedy, gdy zostanie ustawiona ilość znaków.

Question

Chcę dodać link "pokaż więcej" (jeśli kliknięto odsłoni treść, która została przycięta/ukryta) do mojego akapitu, tylko jeśli X liczba znaków jest przekazywana.

Na przykład ustawiłem minimum 120 znaków, a akapit ma tylko 60, więc nie muszę dodawać linku "pokaż więcej".

Jak mogę to rozwiązać? Poniższy kod działa świetnie, ale zastosuje "pokaż więcej" do każdego akapitu, który mam, mimo że jest mniejszy niż kwota X. Co powinienem zrobić?

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

Przypomnę: (? Funkcji .append)

• muszę dołączyć "czytaj więcej" dynamicznie
• Sprawdź znaków i jeśli mniej niż max ilość NIE pokaż więcej czytaj więcej
• opcjonalnie, jeśli ktoś może wymyślić czysty kod JavaScript, który byłby preferowanym wyborem, jeśli nie, dobrze się czuję z jakąś gwiazdą refaktoryzującą kod z mojego kodu powyżej:

Answer 1

napisać czysty JavaScript, które obsługują twoja prośba, zobacz demo tutaj: 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> 

styl:

.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'; 
} 

scenariusz:

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

      } 
     } 

---

Ja również pewne zmiany na kodzie i to działa dobrze. możesz go zobaczyć tutaj: https://jsfiddle.net/IA7medd/j78L76qj/ (jeśli go nedd)

Answer 2

Dokonałem pewnych zmian w kodzie.Mam wymienione w dół approch które mi pomóc zrozumieć

1. iterację każdego .truncate
2. Sprawdź, czy całkowita długość znaków jest większa niż 122;
3. Jeśli true usunąć klasę normHeight & Add Class modHeight
4. Po kliknięciu linku usunąć klasę modHeight & Dodaj 'normHeight'

Może to poniżej urywek być użyteczne

var charLimit = 122; 
function _truncate(el) { 
     var _clone = el.children().first(); 
     //Removing white space & checking length 
     // _clone[0] because _clone is array of jquery object 
     if(_clone[0].innerHTML.trim().length>charLimit){ 
      _clone.removeClass('normHeight').addClass('modHeight'); 
     //Appending read me link 
      el.append($("<div class='read-more'><a href='#' class='more'>Read More</a>")); 
     } 
    } 

    // Since a.more is dynamic element so using event delegation. 
    $("body").on("click",'a.more',function (e) { 
     e.preventDefault(); 
     $(this).parent().siblings('p.modHeight').removeClass('modHeight').addClass('normHeight'); 
     $(this).hide(); // Once entire text is visible remove read me link 
    }); 

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

także zauważ niewielką zmianę w HTML i CSS

Sprawdź to jsfiddle na demo

Answer 3

Właśnie umieścił niewielki dodatek do kodu

$(".truncate").each(function(){ 
if($(this).length < 122) { 
    $(this).parent().next().find(".read-more").hide();  
    } 
}); 

i zmienił to również

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

Updated Fiddle

Answer 4

Zmieniłem twój js na następujący i działa dobrze jak oczekujesz. Dodałem komentarze po zmienionych liniach.

var charLimit = 122; 

function truncate(el) { 
    var shortText = $('<p/>'), //create new <p/> instead of clone 
     originalContent = el.html(), 
     text = el.text().trim(); // take all text & trim starting and trailing white spaces 

    if (text.length > charLimit) { //check char limit overflow 
     el.next(".read-more").length || el.after('<div class="read-more"><a href="#" class="more">Read More</a>'); //append "Read More" button if not exist 
     el.attr("data-originalContent", originalContent); 
     shortText.text(text.substring(0, charLimit) + "...") 
     el.html(shortText); // use html() instead of empty() and append() 
    } 
} 

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

$(".container").on("click", ".more", function (e) { //use delegated event for dynamically added "Read More" button 
    e.preventDefault(); 
    var truncateElement = $(this).parent().prev(".truncate"); //change here as we added "Read More" button after ".truncate" 
    if ($(this).text() === "Read More") { 
     $(this).text("Read Less"); 
     reveal(truncateElement); 
    } else { 
     $(this).text("Read More"); 
     truncate(truncateElement); 
    } 
}); 

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

WORKING DEMO