1

Tengo hecho un archivo index index.php donde creo un formulario... os muestro el código de la columna ESTADO en la cual si pulsamos sobre la imagen nos abre un modal, preguntando qué estado queremos elegir.

En el archivo funciones.js trato las posibilidades de ambos botones y verifico que funciona correctamente mostrándolo en consola.

Mi duda, ando algo perdido, es... ¿cómo puedo actualizar la imagen al hacer click en los botones para cambiar el estado? Es decir, que al seleccionar uno de los dos botones la imagen principal me cambie por el valor del botón seleccionado. Espero haberme explicado, si no ver mi código del link.

index.html

echo "<td onclick=\"cambiar_estado(this);\" width=\"06%\" id=\"".$row['ID_OBLIGATORIO']."\" data-estado=\"".$row['estado']."\">" ?>
<!-- Columna ESTADO del usuario. -->
<center>
<?php
    echo "<a data-toggle=\"modal\" data-target=\"#modalEstado\" style=\"cursor:pointer\">"; //cursor:pointer -> estilo de dedo/raton encima de un link/evento.
      echo "<img src=\"/imagenes/".$row['estado'].".gif\">"; //Cada ID tiene su imagen establecida(0.gif, 1.gif, 2.gif) dependiendo del estado mediante: $row["estado"];
    echo "</a>"; ?>
</center>
<?php 
echo "</td>";           
?>

<div class="modal fade" tabindex="-1" role="dialog" id="modalEstado">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Cambio de estados - Ventana emergente.</h4>
                </div>

            <div class="modal-body" style="background-color:#66D6F8;">
            <p>
            <center><b>¿Deseas cambiar el estado del usuario/ID?</b></center>
            </p>
            </div>     

        <div class="modal-footer">
            <span style="float: left;">
                <button type="button" id="boton_exit" align="center" class="btn btn-default" data-dismiss="modal">Exit</button>
                </span>
                <button type="button" id="boton_uno" name="boton_estado" class="boton-estado btn-default">Boton 1</button>&nbsp;&nbsp;&nbsp;
                <button type="button" id="boton_dos" name="boton_estado" class="boton-estado btn-default">Boton 2</button>

Funciones.js

function cambiar_estado(row) {
    //Conseguimos el estado actual.
    var estado = $(row).attr('data-estado');
    //Mostramos por consola el estado actual.
    console.log("El estado inicial es: "+estado);
    var opcion1, opcion2, label1, label2;

    //Hacemos las diferentes comprobaciones de los estados y valores de los botones.
    if (estado == 1) {
        opcion1 = 0;
        label1 = "Inactivo";
        opcion2 = 2;
        label2 = "Baneado";
    }else if (estado == 2) {
        opcion1 = 0;
        label1 = "Inactivo";
        opcion2 = 1;
        label2 = "Activo";
    }else if (estado == 0) {
        opcion1 = 1;
        label1 = "Activo";
        opcion2 = 2;
        label2 = "Baneado";
    }

    //Añadimos el atributo VALOR al ID asignado.
    $('#boton_uno').attr('estado', opcion1);
    $('#boton_dos').attr('estado', opcion2);

    //Añadimos el atributo HTML texto al ID asignado.
    $('#boton_uno').html(label1);
    $('#boton_dos').html(label2);

    //Guardamos en una variable los valores que tenga el elemento id boton_uno o boton_dos.
    var boton1 = document.querySelector("#boton_uno");
    var boton2 = document.querySelector("#boton_dos");

    //Cambiamos el color de fondo de los botones dependiendo de si su valor es: activo/inactivo/baneado.
    if (estado == 0) {
        boton1.style.backgroundColor = "green";
        boton2.style.backgroundColor = "orange";
    } else if (estado == 1) {
        boton1.style.backgroundColor = "red";
        boton2.style.backgroundColor = "orange";
    } else if (estado == 2) {
        boton1.style.backgroundColor = "red";
        boton2.style.backgroundColor = "green";
    }

    //Conseguimos el estado posterior al hacer click en el correspondiente boton.
    $('.boton-estado').click(function(){
    var estado = $(this).attr('estado');
    //Volvemos a mostrar por consola su valor actual.
    console.log("El valor actual es: "+estado);
    });
}

He probado con la siguiente instrucción pero no me cambia el valor:

$('.boton-estado').val('../imagenes/0.png');

Es decir: $('.nombre_del_id').val('ruta_imagen');

¿A qué se debe el error?

1
  • ¿Algún avance? ¿Te sirvió mi solución? Commented el 2 feb. 2017 a las 9:01

2 respuestas 2

1

Creo que estás confundiendo las cosas un poco (confundiendo lo que se puede hacer con imágenes <img> y con botones <button>).

Creo que lo que deseas hacer (si fuera una etiqueta <img>) es:

$('.boton-estado').attr('src', '../imagenes/0.png');

Eso cambia el atributo src (URL donde está la imagen) por ../imagenes/0.png (se supone que una ruta por encima de donde está la página actual, subdirectorio imagenes y archivo 0.png).

Me confunde la parte en la que dices:

Es decir: $('.nombre_del_id').val('ruta_imagen');

Cuando se hace referencia a la ID de un elemento del DOM se usa # (por ejemplo $('#nombre_del_id')) y cuando se busca una clase (atributo class de la etiqueta HTML) se usa . (por ejemplo $('.nombre_de_la_clase')).

Pero accedas por ID o por clase, estás tratando de cambiar la imagen de un botón (etiqueta <button>) y eso no se puede (al menos de manera directa).

Quizá lo que quieras es cambiar la imagen de fondo (en la hoja de estilos) de esta manera:

$('.boton-estado').css('background-image', 'url(../imagenes/0.png)');

Con eso cambiarás la imagen de fondo de todos los elementos que tengan la clase boton-estado, y creo que es la única manera de cambiar "la imagen" de un botón tal y como lo tienes definido en tu HTML.

0

Si te he entendido bien, lo que necesitas es poder cambiar el "src" (source) de la imagen principal, al hacer click en cualquiera de los botones de cambio de estado, verdad?

Entonces, necesitas acceder a dicho atributo y esto lo puedes hacer con:

(jQuery)

 $('.imagen_principal').attr('src', 'images/status.png');

Esto lo puedes gestionar sin problemas dentro de la función "cambiar_estado", haciendo que el nombre del ".png" sea uno u otro dependiendo del estado.

Saludos.

5
  • Eso es, entendiste la pregunta sí, Marc. Voy a probar... Las imágenes las tengo en una carpeta llamada "imagenes", lo reemplazaré por tu "src".
    – omaza1990
    Commented el 21 nov. 2016 a las 11:27
  • ¿Esa línea de código donde iría, en cada comprobación de estado? ¿O al final del todo una vez que elegimos el boton?
    – omaza1990
    Commented el 21 nov. 2016 a las 11:33
  • Aún no lo conseguí.
    – omaza1990
    Commented el 21 nov. 2016 a las 12:22
  • Alguna idea? :D
    – omaza1990
    Commented el 21 nov. 2016 a las 14:34
  • Esa línea la pondría después de evaluar el estado, ya que solamente quieres cambiar 1 vez la imagen, después de cada click, cierto? Por un lado, reemplaza la carpeta "images" de mi código, por el nombre de tu carpeta... Por otro lado, recuerda de ponerle una clase al tag <img que se llame "imagen_principal". Commented el 22 nov. 2016 a las 10:24

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.