9

Tengo la siguiente estructura:

<div class="row"> <!-- Información (con clasificación) -->

    <div class="mr-3"> <?php echo '<span class="numero" data-contador="'.$contador.'">'.$contador.'</span>'; ?> </div> <!-- Clasificación -->

    <div class="col informacion"> <!-- Información -->
        <div class="row"><?php echo '<div class="puntos"><span class="titulos cancion">'.$titulo_cancion.'</span> de&nbsp<span><a class="autor-recopilatorio" href="'.$enlace_rym.'" target="_blank">'.$nombre_autor.'</a></span></div>'; ?></div>
        <div class="row"><?php echo '<div class="puntos">('.$nombre_ciudad.', '.$nombre_pais.')</div>'; ?></div>
        <div class="row"><?php echo '<div class="puntos">Incluida en su '.$tipo.'&nbsp<span class="titulos">'.$titulo_disco.'</span>&nbsp'.$ano_disco.'</div>'; ?></div>
        <div class="row "><?php echo '<span class="votos">'.$votos_facebook.'&nbsp</span>'; if($votos_facebook == 1) echo 'voto'; else echo 'votos'; ?></div>
    </div>

</div>

<div class="row"> <!-- Sistema de votación -->

    <span class="estrellas mt-3 ml-2">

        <?php 

            if($_SESSION['conectado']) for($i = 1; $i <= 5; $i++) 
            {
                echo '<input type="radio" name="'.$id_cancion.'" value="'.$i.'"';
                echo ($i == $nota) ? " checked><i></i>" : "><i></i>";  
            }

        ?>

    </span>

</div>

Que está incluida en una llamada a la base de datos, de manera que se repite n veces, las necesarias para mostrar todas las canciones que es menester.

Bien, he hecho el siguiente script de jQuery para atrapar ciertos valores:

$(function() 
{
    $('input[type=radio]').change(function()
    {
        var voto = $(this).val();
        var idCancion = $(this).attr('name');
        var cancion = $(this).parents('.row').siblings('.row').find('.cancion').html();
        var autor = $(this).parents('.row').siblings('.row').find('.autor-recopilatorio').html();

        console.log(idCancion);
        console.log(voto);
        console.log(cancion);
        console.log(autor);
    })
});

El problema es que funciona para idCancion y voto pero no para cancion y autor, dado que siempre me devuelve los mismos valores, los correspondientes a la primera canción que se muestra:

introducir la descripción de la imagen aquí

Atrapa los valores que quiero, pero parece que el this no está funcionando como espero, ¿a qué se puede deber? ¿Quizá usar type="radio" es demasiado inespecífico? La verdad es que es el único radiobotón que aparece en la web...

EDITO2: El archivo al completo:

<?php   

    $resultados = mysqli_query($conexion, $sql);

    $filas = array();

    while($filas[] = mysqli_fetch_assoc($resultados));

    array_pop($filas);

    if($_SESSION['id_usuario']) 
    {
        $id_usuario = $_SESSION['id_usuario'];

        $sql = "SELECT id_cancion, nota FROM votan WHERE id_usuario = $id_usuario";

        $resultados = mysqli_query($conexion, $sql);

        $filas2 = array();

        while($filas2[] = mysqli_fetch_assoc($resultados)); 

        mysqli_close($conexion);

        $provisional = array();

        foreach($filas as $clave => $fila) 
        {
            foreach($filas2 as $clave2 => $fila2) if($fila['id_cancion'] == $fila2['id_cancion']) $fila['nota'] = $fila2['nota'];

            array_push($provisional, $fila);
        }

        $filas = $provisional;
    }

    foreach($filas as $clave => $fila) 
    {
        $enlace_youtube = $fila['enlace_youtube'];
        $titulo_cancion = utf8_encode($fila['titulo_cancion']);
        $id_autor = utf8_encode($fila['id_autor']);
        $nombre_autor = utf8_encode($fila['nombre_autor']);
        $enlace_rym = $fila['enlace_rym'];
        $nombre_ciudad = utf8_encode($fila['nombre_ciudad']);
        $nombre_pais = utf8_encode($fila['nombre_pais']);
        $votos_facebook = $fila['votos_facebook'];
        $tipo = $fila['tipo'];
        $titulo_disco = utf8_encode($fila['titulo_disco']);
        $ano = $fila['ano'];
        $id_cancion = $fila['id_cancion'];
        $nota = $fila['nota'];

        $inicio = strpos($enlace_youtube, "watch?v=");
        $enlace_youtube = substr_replace($enlace_youtube, "embed/", $inicio, 8);

        if(strpos($nombre_autor, ", The")) $nombre_autor = "The ".substr($nombre_autor, 0, strpos($nombre_autor, ", The"));

        $decada = substr($ano, 0, 3)."0s";

        if(strpos($titulo_disco, "/")) $nombre_foto = substr($titulo_disco, 0, strpos($titulo_disco, "/"));
        elseif(strpos($titulo_disco, ":")) $nombre_foto = substr($titulo_disco, 0, strpos($titulo_disco, ":"));
        else $nombre_foto = $titulo_disco;

        if($condicion == true) $ano_disco = '('.$ano.')';
        else $ano_disco = null;

        $contador++;

        echo '<div class="row contenedor-youtube pt-4"><iframe class="youtube" width="575" height="323.5" src='.$enlace_youtube.' allowfullscreen></iframe></div>'; #Vídeo

        ?>

        <div class="row pt-2"> <!-- Portada, información y sistema de votación -->

            <div class="contenedor-portada mr-2" data-toggle="modal" data-target="#modal-imagen"> <!-- Portada -->
                <?php echo '<img class="portada" src="imagenes/'.$decada.'/'.$ano.'/'.$nombre_foto.'.jpg" width="150" height="150">'; ?>
            </div>

            <div id="modal-imagen" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <img id="modal-imagen-in" style="width: 100%">
                        </div>
                    </div>
                </div>
            </div>

            <div class="col"> <!-- Información y sistema de votación -->

                <div class="row"> <!-- Información (con clasificación) -->

                    <div class="mr-3"> <?php echo '<span class="numero" data-contador="'.$contador.'">'.$contador.'</span>'; ?> </div> <!-- Clasificación -->

                    <div class="col informacion"> <!-- Información -->
                        <div class="row"><?php echo '<div class="puntos"><span id="'.$id_cancion.'" class="titulos cancion">'.$titulo_cancion.'</span> de&nbsp<span id="'.$id_autor.'"><a class="autor-recopilatorio" href="'.$enlace_rym.'" target="_blank">'.$nombre_autor.'</a></span></div>'; ?></div>
                        <div class="row"><?php echo '<div class="puntos">('.$nombre_ciudad.', '.$nombre_pais.')</div>'; ?></div>
                        <div class="row"><?php echo '<div class="puntos">Incluida en su '.$tipo.'&nbsp<span class="titulos">'.$titulo_disco.'</span>&nbsp'.$ano_disco.'</div>'; ?></div>
                        <div class="row "><?php echo '<span class="votos">'.$votos_facebook.'&nbsp</span>'; if($votos_facebook == 1) echo 'voto'; else echo 'votos'; ?></div>
                    </div>

                </div>

                <div class="row"> <!-- Sistema de votación -->

                    <span class="estrellas mt-3 ml-2">

                        <?php 

                            if($_SESSION['conectado']) for($i = 1; $i <= 5; $i++) 
                            {
                                echo '<input type="radio" name="'.$id_cancion.'" value="'.$i.'"';
                                echo ($i == $nota) ? " checked><i></i>" : "><i></i>";  
                            }

                        ?>

                    </span>

                </div>

            </div>

        </div>

        <?php
    }

?>

Que se vería así:

introducir la descripción de la imagen aquí

8
  • 1
    Me había hecho un lio con la estructura, olvida el comentario y la respuesta que he puesto, ya la he eliminado. Supongo que <!-- Información (con clasificación) --> esta dentro de un for y cada bloque implica una canción diferente. Por lo que estoy viendo si que debería sacarte el nombre de la canción y autor pertinentes. Sigo mirando....
    – x3k
    Commented el 5 sept. 2019 a las 10:28
  • 1
    La solucion que te di te puede funcionar, pero esta basada en una idea erronea. Ademas con los autores no te vale ponerlos como id por que se podrian repetir y tendrian que ser como una clase y quedarte con el primero que encuentras. ¿Podrías probar a crear un div vació sin clases que englobe toda la estructura de cada canción?
    – x3k
    Commented el 5 sept. 2019 a las 10:57
  • 1
    uno que englobe todo eso: <div><div class="row pt-2"> <!-- Portada, información y sistema de votación --> ... </div></div>
    – x3k
    Commented el 5 sept. 2019 a las 11:02
  • 1
    Perfecto, ahora solo me falta averiguar por que pasa eso.... Y perdona por la respuesta equivocada!
    – x3k
    Commented el 5 sept. 2019 a las 11:18
  • 1
    Javier, te invito a que publiques la solución como una respuesta y no como una edición a tu pregunta. Es la forma correcta de hacerlo según las sugerencias de la comunidad.
    – DjCrazy
    Commented el 5 sept. 2019 a las 12:23

2 respuestas 2

5

El problema es el .parents() que devuelve una lista con todos los padres.

Con el siguiente snippet se puede ver el problema, se colorean los hermanos de esos .parents() cuando solo te interesa que se coloreen los que están a su nivel.

$("button").click(function(){
	$(".row").css("background-color","white")
	console.log("Parent ID:"+$(this).parent('.row').attr("id"));
  $(this).parents(".row").siblings('.row').css("background-color","yellow")
});
.row {
  width: 100%;
  border: 1px solid black;
}

.row > .row {
  height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div id="song" class="row">
    Grupo 1
    <div id="desc" class="row">
      Hermano - grupo 1
    </div>
    <div id="votes" class="row">
      Hermano - grupo 1
      <button>
        CLICK
      </button>
    </div>
  </div>
  
  <div id="song2" class="row">
    Grupo 2
    <div id="desc2" class="row">
      Hermano - grupo 2
    </div>
    <div id="votes2" class="row">
      Hermano - grupo 2
      <button>
        CLICK
      </button>
    </div>
  </div>

En tu caso tienes varios padres que coinciden con que tienen la clase .row

Por lo que para moverte hasta el punto que quieres lo podrías hacer concatenando varios .parent()

var cancion = $(this).parent().parent().siblings('.row').find('.cancion').html();
1
  • En efecto, mucho mejor así que la "ñapa" del div vacío. ¡Muchas gracias! Commented el 5 sept. 2019 a las 12:31
0

SOLUCIONADO:

Englobando <div class="row pt-2"> <!-- Portada, información y sistema de votación --> en un simple <div> vacío como me ha sugerido @x3k_js ya funciona:

introducir la descripción de la imagen aquí

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.