0

buenas tardes,

Estoy adjuntando la imagen y código utilizado el cual paso ya mismo a explicar esperando puedan brindarme su ayuda y sugerencia.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí El funcionamiento básicamente es el siguiente:

Cuando Realizo un click en el 1er boton "start", logro conseguir que en mi servidor se modifique el valor de una variable a "1" o true y cuando presione "stop" el valor pasa a ser "0" o false.

Cuando sucede este cambio de valor (0 y 1), mediante el método get consulto al servidor el array que contiene dicha variable para posteriormente pasar a evaluar su valor.

Los datos obtenidos los paso a través de la función procesarDatos(datos). En esta función evalúo el valor de la variable devuelto, si el valor es "1" aplico estilos a un elemento circular y modifico el texto a "RUN" como se logra apreciar en la imagen y cuando es "0" quito los estilos y modifico el texto a "STOP".

Lo descrito anteriormente funciona correctamente. El problema viene a continuación.

  • En el HTML he tenido que crear una clase adicional para independizar los elementos circulares y estos puedan responder de manera independiente, el inconveniente está en que tendría que realizar un extenso código en JS para poder aplicar de manera independiente los estilos ante el evento que puedan generar los botones :

    • MOTOR 1 - 1er "start" y "stop" solo deben modificar al 1er circulo.
    • MOTOR 2 - 2do "start" y "stop" solo deben modificar al 2do circulo.
    • MOTOR 3 - 3er "start" y "stop" solo deben modificar al 3er circulo.
    • etc.................

Agradecería me puedan brindar su apoyo para refactorizar el código y esta asignación de estilos se pueda cumplir de forma independiente para cada circulo ante el respectivo evento generado de los botones como se detalla en la lista anterior.

Gracias.

1 respuesta 1

0

Lo que estas queriendo hacer es algo como esto, donde solo se agrega la clase content-state al div que contrine el estado de cada motor y con un solo click realizar la acción deseada:

$(function () {

        $('.btn').click(function () {
            var btn = $(this);
            btn.addClass('d-none');
            var parentBtns = btn.parent();
            var nextBtn = parentBtns.children('.btn-danger');
            var isDanger = false;
            if (btn.hasClass('btn-danger')) {
                nextBtn = parentBtns.children('.btn-success');
                isDanger = true;
            }
            nextBtn.removeClass('d-none');
            var parentOfCols = parentBtns.parent();
            var parentOfState = parentOfCols.children('.content-state');
            var circle = parentOfState.children('.row').children('.col-12').children('.rounded-circle');
            var alert = parentOfState.children('.row').children('.col-12').children('.alert');
            if (isDanger) {
                circle.addClass('circle-stop');
                circle.removeClass('circle-run');
                alert.html('STOP');
            }
            else {
                circle.addClass('circle-run');
                circle.removeClass('circle-stop');
                alert.html('Run');
            }
            //Aca podes hacer tu peticion ajax
        });

    });
.row {
        margin-bottom: 10px;
    }

    .rounded-circle {
        width: 40px;
        height: 40px;
    }

    .circle-stop {
        background: #ff0000;
    }
    .circle-run {
        background: #4cff00;
    }
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="container-fluid">
    <div class="row">
        <div class="col-6 mx-auto">
            <div class="card">
                <div class="card-body text-center">
                    <h5 class="card-title">Motor 1</h5>
                    <div class="row">
                        <div class="col-4 mx-auto">
                            <button class="btn btn-lg btn-success d-none">start</button>
                            <button class="btn btn-lg btn-danger">stop</button>
                        </div>
                        <div class="col-4 mx-auto content-state">
                            <div class="row">
                                <div class="col-12">
                                    <div class="rounded-circle mx-auto circle-run"></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="alert alert-dark" role="alert">
                                        RUN
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-6 mx-auto">
            <div class="card">
                <div class="card-body text-center">
                    <h5 class="card-title">Motor 2</h5>
                    <div class="row">
                        <div class="col-4 mx-auto">
                            <button class="btn btn-lg btn-success">start</button>
                            <button class="btn btn-lg btn-danger d-none">stop</button>
                        </div>
                        <div class="col-4 mx-auto content-state">
                            <div class="row">
                                <div class="col-12">
                                    <div class="rounded-circle mx-auto circle-stop"></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="alert alert-dark" role="alert">
                                        STOP
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-6 mx-auto">
            <div class="card">
                <div class="card-body text-center">
                    <h5 class="card-title">Motor 3</h5>
                    <div class="row">
                        <div class="col-4 mx-auto">
                            <button class="btn btn-lg btn-success">start</button>
                            <button class="btn btn-lg btn-danger d-none">stop</button>
                        </div>
                        <div class="col-4 mx-auto content-state">
                            <div class="row">
                                <div class="col-12">
                                    <div class="rounded-circle mx-auto circle-stop"></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="alert alert-dark" role="alert">
                                        STOP
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

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.