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 label
me 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.