2015-06-13 30 views
5

Metin 300 karakterden büyük olduğunda daha fazla oku kullanmak istiyorum.Display more button düğmesi

Bunu düzeltmek için bu jQuery'yi kullanıyorum, ancak istediğim gibi çalışmıyor.

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

bu JSFiddle bakınız: https://jsfiddle.net/8cm67cun/1/ Ben bu işi yapmak nasıl

, <p> class dışında <a> class gösterilecek. İşte

cevap

4

sürümü https://jsfiddle.net/8cm67cun/2/ şimdi p dışında etiketiyle çalışıyor güncellenir

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