Как распределять стоимость в признак / идентификацию / div?

Я хочу распределить в признак id изображение в зависимости от стоимости, которая у него есть.

Если valor=0, я распределяю ему изображение 0.gif
Если valor=1, я распределяю ему изображение 1.gif
...
Если valor=n, я распределяю ему изображение n.gif
Код HTML:

echo "<td onclick=\"cambiar_estado(this);\" width=\"06%\" id=\"".$row['ID_OBLIGATORIO']."\" data-estado=\"".$row['estado']."\">" ?>
<!-- Columna ESTADO del usuario. -->
<center>
<div id="cambiar_estado_imagen" class="cambiar_estado_imagen">
    <?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 id=\"img-cambio\" 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>"; 
    ?>
</div>
</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" id="modal-footer" style="font-weight: bold;">
                <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" class="boton-estado btn-default">Boton 1</button>&nbsp;&nbsp;&nbsp;
                <button type="button" id="boton_dos" class="boton-estado btn-default">Boton 2</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Код:

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 == 0) {
        opcion1 = 1;
        label1 = "Activo";
        opcion2 = 2;
        label2 = "Baneado";
    }else if (estado == 1) {
        opcion1 = 0;
        label1 = "Inactivo";
        opcion2 = 2;
        label2 = "Baneado";
    }else if (estado == 2) {
        opcion1 = 0; 
        label1 = "Inactivo";
        opcion2 = 1;
        label2 = "Activo";
    }

    //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) { //Si el estado es = 0 (invalido-rojo), boton1=activo-verde ||| boton2=baneado-naranja.
        boton1.style.backgroundColor = "green";
        boton2.style.backgroundColor = "orange";
    } else if (estado == 1) { //Si el estado es = 1 (valido-verde), boton1=invalido-rojo ||| boton2=baneado-naranja.
        boton1.style.backgroundColor = "red";
        boton2.style.backgroundColor = "orange";
    } else if (estado == 2) { //Si el estado es = 2 (baneado-naranja), boton1=inactivo-rojo ||| boton2=activo-verde.
        boton1.style.backgroundColor = "red";
        boton2.style.backgroundColor = "green";
    }



    //¿Qué ocurre cuando pulsemos un boton para cambiar el estado? ¡¡¡Cambiamos el estado y la imagen!!!
    $('.boton-estado').click(function(){
        var estado = $(this).attr('estado');
        //Volvemos a mostrar por consola su valor actual.
        if (estado == 0) {
            $('#img-cambio').attr('src', '../imagenes/0.gif');
        } else if (estado == 1) {
            $('#img-cambio').attr('src', '../imagenes/1.gif');
        } else if (estado == 2) {
            $('#img-cambio').attr('src', '../imagenes/2.gif');
        }
        console.log("El valor actual es: "+estado);
    });  
}

Моя проблема: почему не меняется изображение, когда я кликаю в кнопке и распределяю Ваше новое изображение этому id/div?

1
задан 22.11.2016, 10:52
4 ответа

И если вместо того, чтобы выбирать div в котором находится изображение, и менять изображение src, ты не помещаешь один id в изображение и ссылки с там?

ej:

echo <img id="img-cambio" src=\"/imagenes/".$row['estado'].".gif\">";

if (estado == 0) {
        $('#img-cambio').attr('src', '../imagenes/0.gif');
3
ответ дан 24.11.2019, 12:28
  • 1
    Уже probé эта opció n ранее, но не sé потому что меня не распознает никакая funció n ни mé все. Probé tambié n с " val". – omaza1990 22.11.2016, 10:12
  • 2
    Привет @omaza1990. Просто из-за любопытства, ¿ в конце концов каковой была проблема? – Francisco Romero 22.11.2016, 12:37
  • 3
    По-видимому точный маршрут: $ (' #img-estado') .attr (' src' '. / изображение / 0.gif'); añ adi идентификация в изображение и Ваш собственный src, и потом в ajax valoré но debí иметь какую-то ошибку " не apreciable" в lí nea có я говорю. Actualicé вопрос в другом формулируемом вопросе. Спасибо. – omaza1990 22.11.2016, 12:41

Ты пробуешь его распределить один div твое изображение. То, что ты был бы должен делать, состоит в том, чтобы ссылаться на изображение в себе и добавлять признак, который ты хочешь изменить на функцию attr:

$('#cambiar_estado_imagen img').attr('src', '../imagenes/0.gif');

или

$('#cambiar_estado_imagen > a > img').attr('src', '../imagenes/0.gif');
2
ответ дан 24.11.2019, 12:28

Во-первых в td ты звонишь во что-то несуществующее.

Помести один id img для более легкого доступа

и после этого я осуществил этот код.

$('#ID_DEL_BOTON').click(function(){
   var estado = $('#ID_DEL_BOTON').attr('estado');
   if(estado == 0){
       $('img').attr("src", "../imagenes/0.gif");
   }//Los demas...
});
2
ответ дан 24.11.2019, 12:28
  • 1
    Уже у меня есть идентификация в img, но также оно я не функционирует... – omaza1990 22.11.2016, 11:39

Предполагая, что #cambiar_estado_image будьте элементом, чего тебе не хватает:

$('#cambiar_estado_imagen > a > img').attr('src', '../imagenes/0.gif');

$ .attr ждет 2 параметра, признак, который нужно менять, и стоимость признака.

В случае когда только он переместит один, он возвратит стоимость вышеупомянутого признака, всякий раз когда он существовал.

1
ответ дан 24.11.2019, 12:28
  • 1
    Распознает меня и меня берет стоимость кнопки, но меня не обновляет этот элемент. В консоли sí он это берет. – omaza1990 22.11.2016, 09:58
  • 2
    @omaza1990 ты хочешь изменить фотографию boton или фотографию элемента #cambiar_estado_imagen? – lois6b♦ 22.11.2016, 09:59
  • 3
    элемента. Нажимая кнопку было бы должно меняться изображение элемента – omaza1990 22.11.2016, 10:00
  • 4
    Serí в подходящий мочь бросать беглый взгляд в структуру html. – Muriano 22.11.2016, 10:01
  • 5
    уже está объединенный. – omaza1990 22.11.2016, 10:06

Теги

Похожие вопросы