Geek Answers Handbook

Javascript link disappears after first click

I am new to Javascript and I am trying to create something relatively simple.

I have an HTML file with the following div in it:

<p id="textArea" class = "more"> <!-- random_text --> </p>

I want to make a Javascript function that takes the text inside this div, breaks it into words and shows only as many words as I select. I also want to add a “see more” link at the end of the shortened text, which I can click to switch between the full and shortened versions of the text.

My function looks like this:

 function expandContent() { var showChar = 30; var ellipsesText = "..."; var moreText = "(read more)"; var lessText = "(read less)"; $('.more').each(function() { var $this = $(this); var fullText = $this.text().split(" "); if (fullText.length > showChar) { var shortText = fullText.slice(0, showChar); shortText.push('...'); shortText = shortText.join(separator=' '); $this.data("full", fullText.join(separator=' ')) .stop() .data("state", "shortState") .stop() .data("short", shortText) .stop() .html(shortText); $('<a />', { class: 'record-brief-more-link', text: moreText, href: '#' }).appendTo($this); } }); $(".record-brief-more-link").on('click', function() { var $text = $(this).closest('.more'); var state = $text.data("state"); var linkText = (state == "shortState") ? lessText : moreText; $(this).text(linkText); $text.html($text.data((state == "shortState") ? "full" : "short")); $text.data("state", (state == "shortState") ? "fullState" : "shortState"); });};

The problem is that after I click the link once, I get the full text as expected, but the link is no longer visible, so I can’t go back to the shortened text if I want. Does anyone know why this is happening?

+5
source share
1 answer

When you respond to a click, you call:

 $text.html($text.data((state == "shortState") ? "full" : "short"));

Which replaces the entire contents of the containing .more element, including the a tag added previously.

The best thing would be to disconnect the link before dumping the content, and then re-add it:

 var $link = $(this); var $text = $link.closest('.more'); var state = $text.data("state"); var linkText = (state == "shortState") ? lessText : moreText; $link.text(linkText).detach(); $text.html($text.data((state == "shortState") ? "full" : "short")); $text.append($link); 

 function expandContent() { var showChar = 30; var ellipsesText = "..."; var moreText = "(read more)"; var lessText = "(read less)"; $('.more').each(function() { var $this = $(this); var fullText = $this.text().split(" "); if (fullText.length > showChar) { var shortText = fullText.slice(0, showChar); shortText.push('...'); shortText = shortText.join(separator = ' '); $this.data("full", fullText.join(separator = ' ')) .stop() .data("state", "shortState") .stop() .data("short", shortText) .stop() .html(shortText); $('<a />', { class: 'record-brief-more-link', text: moreText, href: '#' }).appendTo($this); } }); $(".record-brief-more-link").on('click', function() { var $link = $(this); var $text = $link.closest('.more'); var state = $text.data("state"); var linkText = (state == "shortState") ? lessText : moreText; $link.text(linkText).detach(); $text.html($text.data((state == "shortState") ? "full" : "short")); $text.append($link); $text.data("state", (state == "shortState") ? "fullState" : "shortState"); }); }; expandContent(); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p id="textArea" class="more"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+3
source

More articles:


All Articles