1

Buenas,

Me ha surgido el siguiente problema en la creación de un foro. Los mensajes de cada hilo se cargan de forma dinámica con el siguiente HTML:

foreach ($todas_respuestas as $respuestas) {

            echo "<div class='hilo_wrapper_sin_padding'>";
                echo "<div class='info_usuario'>";
                    echo "<div class='info_avatar'>";
                        echo "<a href='#'>" . $respuestas['quien_comenta'] . "</a>";

                        $statement = $conexion->prepare("SELECT * FROM users WHERE usuario = :user");
                        $statement->execute(array(":user" => $respuestas['quien_comenta']));
                        $user = $statement->fetchAll();


                        echo "<div class='avatar'>";
                            echo "<img src='users/" . $user[0]['thumb'] . "' alt='Foto del usuario'>";
                        echo "</div>";
                    echo "</div>";

                    $statement = $conexion->prepare("SELECT * FROM hilos_foro WHERE abierto_por = :abierto");
                    $statement->execute(array(":abierto" => $respuestas['quien_comenta']));
                    $hilos_user = $statement->fetchAll();

                    $statement = $conexion->prepare("SELECT * FROM comentarios WHERE quien_comenta = :comentarios");
                    $statement->execute(array(":comentarios" => $respuestas['quien_comenta']));
                    $comentarios_user = $statement->fetchAll();

                    $all_messages = count($hilos_user) + count($comentarios_user);



                    $mes = substr($user[0]['fecha_registro'],5,2);
                    $anyo = substr($user[0]['fecha_registro'],0,4);
                    $meses = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio','julio','agosto','septiembre','octubre','noviembre','diciembre'];

                    echo "<div class='profile'>";
                        if ($all_messages < 100) {
                            echo "<p class='rango'>Novato</p>";
                        } else if ($all_messages >= 100 AND $all_messages < 500) {
                            echo "<p class='rango'>Adicto</p>";
                        } else if ($all_messages >= 500 AND $all_messages < 1000) {
                            echo "<p class='rango'>Mega-adicto</p>";
                        }


                        if ($user[0]['administrador'] == 1) {
                            echo "<div class='administrador'>";
                                echo "<p class='cursiva'><strong>Staff</strong></p>";
                                echo "<p><strong>Administrador</strong></p>";
                            echo "</div>";
                        }
                        if (!empty($user[0]['de_donde'])) {
                            echo "<p class='mas_info_user'><strong>" . $all_messages . "</strong> mensajes desde <strong>" . $meses[$mes-1] . " " . $anyo  . "</strong> en <strong>" . $user[0]['de_donde'] . "</strong></p>" ;
                        } else {
                            echo "<p class='mas_info_user'><strong>" . $all_messages . "</strong> mensajes desde <strong>" . $meses[$mes-1] . " " . $anyo . "</strong></p>";
                        }

                    echo "</div>";

                echo "</div>";
                echo "<div class='texto'>";

                $fecha_total_actual = $hoy['year'] . "-" . $mes . "-" . $day . " " . $hora . ":" . $minuto;
                $fecha_total_actual = new DateTime($fecha_total_actual);
                $fecha_apertura = substr($respuestas['fecha_comentario'],0,16);
                $fecha_apertura = new DateTime($fecha_apertura);
                $anyo_apertura = substr($respuestas['fecha_comentario'],0,4);
                $mes_apertura = substr($respuestas['fecha_comentario'],5,2);
                $dia_apertura = substr($respuestas['fecha_comentario'],8,2);
                $hora_apertura = substr($respuestas['fecha_comentario'],11,2);
                $minuto_apertura = substr($respuestas['fecha_comentario'],14,2);
                $interval = date_diff($fecha_apertura, $fecha_total_actual);
                $dia_intervalo = substr($interval->format('%R%a'),1,strlen($interval->format('%R%a')));
                $hora_intervalo = $interval->format('%H');
                $minutos_intervalo = $interval->format('%I');


                $mes = substr($respuestas['fecha_comentario'],5,2);
                $dia = substr($respuestas['fecha_comentario'],8,2);
                $meses = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio','julio','agosto','septiembre','octubre','noviembre','diciembre'];
                $hora = substr($respuestas['fecha_comentario'],11,2);
                $minuto = substr($respuestas['fecha_comentario'],14,2);

                $respuesta_id = $respuestas['ID'];

                $foro_like = $respuestas['foro'];
                $subforo_like = $respuestas['subforo'];


                    echo "<div class='cabecera_post'>";

                        if ($dia_intervalo == 0 AND $hora_intervalo == 0 AND $minutos_intervalo < 1) {
                            echo "<p class='fecha_publicacion'>Ahora</p>";
                        } else if ($dia_intervalo == 0 AND $hora_intervalo == 0 AND $minutos_intervalo == 1) {
                            echo "<p class='fecha_publicacion'>Hace " . substr($minutos_intervalo,1,2) . " minuto</p>";
                        } else if ($dia_intervalo == 0 AND $hora_intervalo == 0 AND $minutos_intervalo < 10 AND $minutos_intervalo > 1) {
                            echo "<p class='fecha_publicacion'>Hace " . substr($minutos_intervalo,1,2) . " minutos</p>";
                        } else if ($dia_intervalo == 0 AND $hora_intervalo == 0 AND $minutos_intervalo < 60 AND $minutos_intervalo >= 10) {
                            echo "<p class='fecha_publicacion'>Hace " . $minutos_intervalo . " minutos</p>";
                        } else if ($dia_intervalo == 0 AND $dia_apertura == $day) {
                            echo "<p class='fecha_publicacion'>Hoy a las " . $hora_apertura . ":" . $minuto_apertura . "</p>";
                        } else if ($dia_intervalo == 0 AND $dia_apertura == $day-1) {
                            echo "<p class='fecha_publicacion'>Ayer a las " . $hora_apertura . ":" . $minuto_apertura . "</p>";
                        } else if ($dia_intervalo == 1 AND $dia_apertura == $day-1) {
                            echo "<p class='fecha_publicacion'>Ayer a las " . $hora_apertura . ":" . $minuto_apertura . "</p>";
                        } else {
                            echo "<p class='fecha_publicacion'>" . $dia_apertura . " " . $meses[$mes_apertura-1] . " " . $anyo_apertura . " " . $hora_apertura . ":" . $minuto_apertura . "</p>";
                        }


                        echo "<div class='botones_post'>";
                            echo "<p id='resultado'></p>";
                            echo "<form class='corazon_like' name='like' id='heart' title='Me gusta el post' action='foro.php?foro=Xbox%20One&subforo=General&hilo=Vamos%dale&ID=1' method='post'>";
                                echo "<input type='checkbox' id='corazon' name='corazon'>";
                                echo "<label class='fa fa-heart no_me_gusta' onclick='myFunction($respuesta_id)' for='corazon'></label>";
                            echo "</form>";
                            echo "<a href='#' title='Borrar post'><i class='fa fa-trash' aria-hidden='true'></i></a>";
                            echo "<a href='#' title='Reportar post'><i class='fa fa-ban' aria-hidden='true'></i></a>";

                        echo "</div>";
                    echo "</div>";

                    echo "<p>" . nl2br($respuestas['texto']) . "</p>";
                echo "</div>";

            echo "</div>";
        }

Sé que es un poco largo, la duda que tengo es la siguiente. Tengo unos botones por cada mensaje, para poder borrar, reportar o darle a me gusta. La estructura de los botones es esta, que está incluido en el código de arriba pero para que no lo tengáis que buscar:

echo "<div class='botones_post'>";
    echo "<p id='resultado'></p>";
    echo "<form class='corazon_like' name='like' id='heart' title='Me gusta el post' action='foro.php?foro=Xbox%20One&subforo=General&hilo=Vamos%dale&ID=1' method='post'>";
        echo "<input type='checkbox' id='corazon' name='corazon'>";
        echo "<label class='fa fa-heart no_me_gusta' onclick='myFunction($respuesta_id)' for='corazon'></label>";
     echo "</form>";
     echo "<a href='#' title='Borrar post'><i class='fa fa-trash' aria-hidden='true'></i></a>";
     echo "<a href='#' title='Reportar post'><i class='fa fa-ban' aria-hidden='true'></i></a>";
echo "</div>";

Me he dado cuenta que soy incapaz de seleccionar con la clase el elemento correcto. Lo que quiero es que al presionar sobre el botón el labelme agregue o me quite una clase en función de si el input está seleccionado o no, pero no me acaba de funcionar. El script que estoy usando es el siguiente:

    $('.corazon_like').click(function(){
    var probando = document.getElementsByClassName('fa-heart');
    console.log(probando);

    if (heart == 0) {
        probando.className += " no_me_gusta";
        heart = 1;
    } else {
        probando.removeClass("no_me_gusta");
        heart = 0;
    }
});

Lo único que se me ha ocurrido es usar id en vez de class, pero que se generasen de forma dinámica, si es que eso fuese posible. Estoy bastante perdido y no sé ni para dónde tirar. No sé cómo diferenciar que si pulso sobre le botón de cierto comentario, se ejecute el script sólo en ese comentario, no en todos o ninguno.

El resultado de la variable prueba del script es:

HTMLCollection [ <i.fa.fa-heart>, <label.fa.fa-heart.no_me_gusta>,<label.fa.fa-heart.no_me_gusta>, <label.fa.fa-heart.no_me_gusta>, <label.fa.fa-heart.no_me_gusta>, <label.fa.fa-heart.no_me_gusta>, <label.fa.fa-heart.no_me_gusta> ]  main.js:27:3
HTMLCollection [ <i.fa.fa-heart>, <label.fa.fa-heart.no_me_gusta>, <label.fa.fa-heart.no_me_gusta>, <label.fa.fa-heart.no_me_gusta>, <label.fa.fa-heart.no_me_gusta>, <label.fa.fa-heart.no_me_gusta>, <label.fa.fa-heart.no_me_gusta> ]

Me lo repite dos veces, aunque no sé el motivo.

1
  • Y de dónde sale heart? (No es tan relevante, pero sería bueno saber)
    – ffflabs
    Commented el 27 mar. 2017 a las 18:03

1 respuesta 1

0

Suponiendo que la variable heart está relacionada al contenedor adecuado, tu error está en que para cada selector $('.corazon_like') estás operando sobre todos los .fa-heart del documento, sin importar si acaso son los que corresponden al contenedor o no.

Segundo, no tiene sentido aplicar métodos de jQuery (.removeClass) sobre algo que no es la salida de una selección de jQuery.

Tu código debiera ser algo como:

$('.corazon_like').click(function(){
    var probando = $(this).find('.fa-heart');
    console.log(probando);

    if (heart == 0) {
        probando.addClass("no_me_gusta");
        heart = 1;
    } else {
        probando.removeClass("no_me_gusta");
        heart = 0;
    }
});

Pero esta respuesta está incompleta porque no entiendo de dónde sale heart, y si acaso es una variable global, entonces es incorrecto que la manipulación de un contenedor afecte a la variable global. Cada elemento capaz de ser liked o unliked debe manejar su propio estado.

Pienso que tienes que usar la misma query con que generas estos contenedores para establecer el ID de cada post o thread, según corresponda, y asignar identificadores únicos utilizando ese ID. En tu código, por ejemplo, vemos que algunos elementos tienen ID (resultado, heart) y la iteración que necesariamente saldrá de tu query provocará un montón de elementos con el mismo ID, y eso no va a funcionan nunca.

Lo que debiese haber en cada botonera de like/unlike es algo del estilo:

$respuesta_id=$respuestas['id'];
echo "<div class='botones_post'>";
    echo "<p id='resultado_{$respuesta_id}'></p>";
    echo "<form class='corazon_like' name='like' id='heart_{$respuesta_id}' title='Me gusta el post' action='foro.php?foro=Xbox%20One&subforo=General&hilo=Vamos%dale&ID={$respuesta_id}' method='post'>";
        echo "<input type='checkbox' id='corazon_{$respuesta_id}' name='corazon' class='corazon'>";
        echo "<label class='fa fa-heart no_me_gusta' onclick='myFunction($respuesta_id)' for='corazon_{$respuesta_id}'></label>";
     echo "</form>";
     echo "<a href='#' title='Borrar post'><i class='fa fa-trash' aria-hidden='true'></i></a>";
     echo "<a href='#' title='Reportar post'><i class='fa fa-ban' aria-hidden='true'></i></a>";
echo "</div>";

Y luego declarar un listener para los forms

$('.corazon_like').click(function(){
    var probando = $(this).find('.fa-heart');
    console.log(probando);
    var heart=$(this).find('.corazon').is(':checked');

    if (heart == 0) {
        probando.addClass("no_me_gusta");
        $(this).find('.corazon').prop('checked',true);
    } else {
        probando.removeClass("no_me_gusta");
        $(this).find('.corazon').prop('checked',false);
    }
});

Finalmente: es redundante usar esta lógica para hacer toggle de un elemento checkbox, cuando éste en sí mismo es un interruptor natural.

Tu Respuesta

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