0

Tengo el siguiente código:

<h1>Posts</h1>
<table>
    <thead>
        <tr>
            <th>Content</th>
            <th colspan="3"></th>
        </tr>
    </thead>
    <tbody>
        <% @posts.each do |post| %>
            <tr>
                <td>
                    <div id="bloque1" class="bloque1">
                        <%= "#{post.content[0..25]}... " %>
                        <button onclick="muestra2<%= "#{post.id}" %>();">leer mas</button>
                    </div>
                    <div style="display:none" id="bloque2" class="bloque2">
                        <%= post.content %>
                        <button onclick="muestra1<%= "#{post.id}" %>();">leer menos</button>
                    </div>
                    <script>
                        function <%= "muestra1#{post.id}" %>(){
                            document.getElementById('bloque1').style.display="block";
                            document.getElementById('bloque2').style.display="none";
                        };
                        function <%= "muestra2#{post.id}" %>(){
                            document.getElementById('bloque1').style.display="none";
                            document.getElementById('bloque2').style.display="block";
                        };
                    </script>
                </td>
            </tr>
        <% end %>
    </tbody>
</table>

Mi objetivo es:

  • Leer más texto o leer menos texto con los botones respectivos en cada registro del listado.

El problema que tengo es:

  • Que sólo funciona para el primer registro del listado.

¿Pueden ayudarme? Gracias!!

1 respuesta 1

2

En cada iteración del ciclo estás repitiendo ID's (bloque1 y bloque2) y estas deben ser únicas, precisamente, para evitar problemas como el que tienes. En vez de crear funciones "únicas" para cada elemento, crea ID única para cada elemento, solo dos funciones y envía ID como parámetro.

Los bloques quedarán así: bloque1-### y bloque2-###, donde ### es ID de post post.id

<h1>Posts</h1>
<table>
    <thead>
        <tr>
            <th>Content</th>
            <th colspan="3"></th>
        </tr>
    </thead>
    <tbody>
        <% @posts.each do |post| %>
            <tr>
                <td>
                    <div id="bloque1-<%= "#{post.id}" %>" class="bloque1">
                        <%= "#{post.content[0..25]}... " %>
                        <button onclick="muestra2(<%= "#{post.id}" %>);">Leer más</button>
                    </div>
                    <div style="display:none" id="bloque2-<%= "#{post.id}" %>" class="bloque2">
                        <%= post.content %>
                        <button onclick="muestra1(<%= "#{post.id}" %>);">Leer menos</button>
                    </div>
                </td>
            </tr>
        <% end %>
    </tbody>
</table>
<script>
function muestra1(postId){
    document.getElementById('bloque1-' + postId).style.display="block";
    document.getElementById('bloque2-' + postId).style.display="none";
};
function muestra2(postId){
    document.getElementById('bloque1-' + postId).style.display="none";
    document.getElementById('bloque2-' + postId).style.display="block";
};
</script>
2
  • 2
    Interpolar el id del post para volverlo string no es necesario. Con <%= post.id %> debería ser suficiente. Commented el 7 abr. 2020 a las 21:02
  • @AlterLagos, desconozco Ruby, así que solo adapté el código original. Pero hoy aprendí algo nuevo... ¡Gracias!
    – Triby
    Commented el 7 abr. 2020 a las 21:29

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.