Anzeige lesen Sie mehr Schaltfläche

Question

Ich möchte eine Schaltfläche lesen mehr verwenden, nachdem ein Text größer als 300 Zeichen ist.

Ich benutze diese jQuery, um das zu beheben, aber es funktioniert nicht wie ich will.

var $j = jQuery.noConflict(); 
$j('.reviewtekst').each(function() { 
    var $pTag = $j(this).find('p'); 
    if($pTag.text().length > 300){ 
     var shortText = $pTag.text(); 
     shortText = shortText.substring(0, 300); 
     $pTag.addClass('fullArticle').hide(); 
     $pTag.append('<a class="read-less-link">Lees minder</a>'); 
     $j(this).append('<p class="preview">'+shortText+'</p><div class="curtain-shadow"></div><a class="read-more-link">Read more</a>'); 
    } 
}); 

$j(document).on('click', '.read-more-link', function() { 
    $j(this).parent().hide().prev().show(); 
}); 

$j(document).on('click', '.read-less-link', function() { 
    $j(this).parent().hide().next().show(); 
}); 

dieses JSFiddle Siehe: https://jsfiddle.net/8cm67cun/1/

Wie kann ich diese Arbeit zu machen, die <a> class außerhalb des <p> class anzuzeigen.

Answer 1

Hier wird aktualisierte Version https://jsfiddle.net/8cm67cun/2/ jetzt funktioniert es mit einem Tag außerhalb der p feinen

$j(document).on('click', '.read-more-link', function() { 
    $j(this).hide().parent().find('.preview').hide().prev().show(); 
}); 

$j(document).on('click', '.read-less-link', function() { 
    $j(this).parent().hide().next().show(); 
    $j(this).parents('.reviewtekst').find('.read-more-link').show(); 
});