1

Buenas si bien vi varias preguntas de este tipo ninguna resuelve mi inconveniente, tengo en una pagina varios p con la misma clase ".more" en la cual c/u contiene un texto diferente, tengo que logar que si el texto contenido es muy largo lo acorte y agregue un botón leer +, el tema es que lo logre, pero siempre me imprime el mismo texto del primer p en todos los p ".more".

<p class=".more">Primer texto</p>
<p class=".more">Segundo texto con mas caranteres</p>
<p class=".more">Tercer texto</p>

en el jquery

$(function(){
    var showChar = 5;
    var content = document.querySelectorAll('.more');
   var ellipsestext = "...";
   var moretext = "Seguir leyendo ...";
   var lesstext = "Mostrar menos";

for (var i = 0; i < content.length; i++) {
  if(content[i].innerHTML.length > showChar) {
    var c = content[i].innerHTML.substr(0, showChar);

      html = '<div class="abstract">' + c + ellipsestext + '</div>' + '<div class="morecontent">' + content[i].innerHTML + '</div>' + '<p><span class="morelink">' + moretext + '</span></p>'; 

     $('.more').html(html);
  }
}

});

bueno traté de resumirlo al código para ver el problema nada mas, para mi que el problema esta en $('.more').html(html); por que siempre asigna lo mismo a todos los p

me hace esto, agregando la clase abstact si se cumple la condición de ser menor a 5 caracteres... que lo omití para no poner tanto código.

<p class=".more">Primer texto</p>
<p class=".more">Primer texto</p>
<p class=".more">Primer texto</p>

2 respuestas 2

3

//Definimos una variable tipo objeto donde se almacenará el texto original
var originalText = {
}
//definimos una constante donde pondremos el maximo de caracteres a mostrar
const caracteres = 18;

//Recorremos cada uno de los elementos que tengan la clase moretext
$('.moreText').each(function(index,element){
  
  //Almacenamos el texto original en la variable originalText
  originalText[index] = $(this).text();
  //le asignamos un atributo para poder identificarlo y agregarle el texto completo cuando se le dé click
  $(this).attr('nIdTag', index);
  
  //Hacemos una validación si el texto es mas grande que los caracteres permitidos
  if(originalText[index].length > caracteres){
    //Acortamos el texto y añadimos una etiqueta B que al dar click disparará el evento que hara el funcionamiento deseado
    $(this).html(originalText[index].substr(0,caracteres)+'... <b class="verMas" style="cursor:pointer">Mostrar Más</b>')
  }
  
})



function agregarEventos(){
  
  $('.verMas').off('click')
  //Añadimos el evento a la clase .verMas de la etiqueta B
  $('.verMas').on('click',function(){
    //Obtenemos la etiqueta padre del elemento al que hacemos click
    var padre = $(this).parents('.moreText');
    //accedemos al atributo nIdTag que seteamos como identificador
    var nIdTag = padre.attr('nIdTag')
    // ya teniendo el identificador le ponemos el texto original al
    //padre con ayuda del objeto originalText y el identificador
    //EDIT
    //Agregamos la etiqueta B para el funcionamiento de ver menos
    padre.html(originalText[nIdTag]+'... <b  style="cursor:pointer" class="verMenos'+nIdTag+'">Ver Menos</b>')

    //Definimos el comportamiendo del evento click
    $('.verMenos'+nIdTag).on('click',function(){
    
      if(originalText[nIdTag].length > caracteres){
          //El funcionamiento es similar al del primer bloque
         padre.html(originalText[nIdTag].substr(0,caracteres)+'... <b class="verMas" style="cursor:pointer">Mostrar Más</b>')
         agregarEventos();
      }
    })
  })
}

agregarEventos();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="moreText">Lorem ipsum dolor</p>
<p class="moreText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta arcu at egestas ultricies. Proin.</p>
<p class="moreText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consequat auctor dui, a efficitur dui rutrum eget. Quisque egestas eleifend.</p>

he actualizado la respuesta para la funcionalidad de ver menos... es un poco rustica y puede mejorarse sin embargo cumple con la funcionalidad

5
  • Muchas Gracias Fernado por tu ayuda! Commented el 1 ago. 2022 a las 18:05
  • En el caso que quiera agregarle un leer menos , le agregue en el evento click padre.html(originalText[nIdTag]+ <b class="verMenos" style="cursor:pointer">Mostrar Menos</b> ), y cree ese evento pero no hace nada al clikear, sera que lo tendre que manejar con el attr hide o con un toggle? he intentado pero nada Commented el 1 ago. 2022 a las 18:15
  • he actualizado la respuesta, hice algunos cambios para poder cumplir con la funcionalidad de "ver menos", entiendo que puede ser una forma no tan practica de resolverlo y que puede ser mejorado sin embargo cumple con el propósito. Commented el 1 ago. 2022 a las 22:06
  • Perfecto! ahora si pude entenderlo muchas gracias Fernando! Commented el 6 ago. 2022 a las 3:37
  • En la comunidad estamos para ayudar!.. en caso de que te haya servido mi respuesta te agradecería la marcaras como aceptada. Commented el 6 ago. 2022 a las 14:44
0

html

<p class="more">Primer texto</p>
<p class="more">Segundo texto con mas caranteres!!</p>
<p class="more">Tercer texto</p>

CSS

.full {
  display: none;
}
.mas {
  cursor: pointer;
  color: green;
}
.menos {
  cursor: pointer;
  color: red;
  display: none;
}

JS

jQuery(function(){
    var showChar = 12;
    var content = document.querySelectorAll('.more');
  
for (var i = 0; i < content.length; i++) {
  if(content[i].innerHTML.length > showChar) {
    var c = content[i].innerHTML.substr(0, showChar);
    var d = content[i].innerHTML.substr(showChar, 9999);
    var html = '<div class="container">'
    + '<div class="content">' + c + '<span class="full">'+ d +'</span>'+'</div>'
    + '<span class="mas" onclick="seeMore(this);">...Mas</span>' 
    + '<span class="menos" onclick="seeLess(this);">Menos</span>'
    + '</div>';
     $(content[i]).html(html);
  }
}

});

function seeMore(obj) {
  var full = obj.parentNode.querySelector('.full').style.display = 'inline-flex';
  var less = obj.parentNode.querySelector('.mas').style.display = 'none';
  var less = obj.parentNode.querySelector('.menos').style.display = 'block';
}

function seeLess(obj) {
  var full = obj.parentNode.querySelector('.full').style.display = 'none';
  var less = obj.parentNode.querySelector('.mas').style.display = 'inline-flex';
  var less = obj.parentNode.querySelector('.menos').style.display = 'none';
}

Ejemplo See more, see less - CodePen

1
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 1 ago. 2022 a las 20:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.