1

Como puedo lograr ejecutar la acción asignada por cada botón Según el id de cada uno. No se si me explico.

Ej: El botón de Modal2 Button2 del Titulo del Modal 2 debe ejecutar la función action: function () {alert('Modal2 Button2');} en lugar de eso ejecuta el ultimo ciclo que ejecuto al cargar el código al inicio que fue del botón Modal3 Button2

    var jQ = false;
    
    if (typeof $ != 'function' && jQ == false) {
        window.$ = function(id) {
            return document.querySelector(id);
        }
    }
    
    if (jQ == false) {
        Element.prototype.settings = function(settings) {
            SmEl = this;
            option = settings;
            ct();
        };
    }
    
    function ct() {
        if (option.buttons != undefined) {
            
            b = option.buttons ? option.buttons : "";
            
            Object.keys(b).forEach(function(key, btn) {
                if (b[key] != undefined) {
                    if (b[key] != "") {
                        Btns = document.createElement("BUTTON");
                        Btns.classList.add("Btn");
                        Btns.classList.add([key]);
                        BtnsNode = document.createTextNode(b[key].name);
                        Btns.appendChild(BtnsNode);
                        
                        Btns.onclick = function(){
                            b[key].action();
                        };
                        
                        SmEl.querySelector(".Modal-Footer").appendChild(Btns);
                    }
                }
            });
        }
    }
    
    $("#Modal1").settings({
        buttons: {
            accept: {
                name: "Modal1 Button1",
                action: function () {
                    alert('Modal1 Button1');
                }
            },
            cancel: {
                name: "Modal1 Button2",
                action: function () {
                    alert('Modal1 Button2');
                }
            },
            custom: {
                name: "Modal1 Button3",
                action: function () {
                    alert('Modal1 Button3');
                }
            }
        }
    });
    $("#Modal2").settings({
        buttons: {
            accept: {
                name: "Modal2 Button1",
                action: function () {
                    alert('Modal2 Button1');
                }
            },
            cancel: {
                name: "Modal2 Button2",
                action: function () {
                    alert('Modal2 Button2');
                }
            },
            custom: {
                name: "Modal2 Button3",
                action: function () {
                    alert('Modal2 Button3');
                }
            }
        }
    });
    $("#Modal3").settings({
        buttons: {
            accept: {
                name: "Modal3 Button1",
                action: function () {
                    alert('Modal3 Button1');
                }
            },
            cancel: {
                name: "Modal3 Button2",
                action: function () {
                    alert('Modal3 Button2');
                }
            },
            custom: {
                name: "Modal3 Button3",
                action: function () {
                    alert('Modal3 Button3');
                }
            }
        }
    });
<div class="Modal-Container" id="Modal1">
    <div class="Modal Drop">
        <div class="Modal-Head">Titulo del Modal 1</div>
        <div class="Modal_Body"></div>
        <div class="Modal-Footer"></div>
    </div>
</div>

<div class="Modal-Container" id="Modal2">
    <div class="Modal Drop">
        <div class="Modal-Head">Titulo del Modal 2</div>
        <div class="Modal_Body"></div>
        <div class="Modal-Footer"></div>
    </div>
</div>

<div class="Modal-Container" id="Modal3">
    <div class="Modal Drop">
        <div class="Modal-Head">Titulo del Modal 3</div>
        <div class="Modal_Body"></div>
        <div class="Modal-Footer"></div>
    </div>
</div>

2 respuestas 2

1
Btns.onclick = function(){
    b[key].action();
};

En la función ct() estás trabajando únicamente con los objetos, no con los elementos. Cuando el código entra en esa función, b es el último objeto asignado en su scope (el último de la iteración). En lugar de eso, debes asignar el objeto del elemento, no el objeto de forma independiente.

Se le podría dar una vuelta al código y simplificarlo, pero la solución rápida es pasar el elemento a la función ct(), de esa forma asignarás el evento correctamente a la función dentro del objeto del elemento en cuestión.

Element.prototype.settings = function(settings) {
    this.option = settings;
    ct(this);
};

function ct(el) {
    if (el.option.buttons != undefined) {
        b = el.option.buttons ? el.option.buttons : "";
        Object.keys(b).forEach(function (key, btn) {
            if (b[key] != undefined) {
                if (b[key] != "") {
                    Btns = document.createElement("BUTTON");
                    Btns.classList.add("Btn");
                    Btns.classList.add([key]);
                    BtnsNode = document.createTextNode(b[key].name);
                    Btns.appendChild(BtnsNode);
                    Btns.onclick = function () {
                        el.option.buttons[key].action();
                    };
                    el.querySelector(".Modal-Footer").appendChild(Btns);
                }
            }
        });
    }
}

Aquí tienes el ejemplo funcional.

0

Aquí tienes un ejemplo de código mas simplificado

const modals = document.querySelectorAll('.Modal-Container')
const buttons = {
  accept: {
    text: 'Button1'
  },
  cancel: {
    text: 'Button2'
  },
  custom: {
    text: 'Button3'
  },
  action: function (params) {
    alert(params)
  }
}

modals.forEach(e => {
  Object.keys(buttons).forEach(key => {
    let btn_node
    let text = buttons[key].text
    if (key !== 'action') {
      let btn = document.createElement('BUTTON')
      btn.classList.add('Btn')
      btn.classList.add(key)
      btn_node = document.createTextNode(`${e.id} ${text}`)
      btn.onclick = function () {
        buttons.action(`${e.id} ${text}`)
      }
      btn.appendChild(btn_node)
      e.querySelector('.Modal-Footer').appendChild(btn)
    }
  })
})

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.