Function to create buttons from an object

Question

Function to create buttons from an object

Navigation

#1 by (1 votes)

1

I need to create a function similar to this:

criarBotoes({
  "Abrir": function(dados){
    alert("Abrindo...");
    console.log(dados);
  },
  "Fechar": function(dados){
    alert("Fechar...");
    console.log(dados);
  },
});

I tried the following:

function criarBotoes(botoes){
  for(var texto in botoes){
    $("<button>",{
        text: texto,
        click: botoes[texto],
        appendTo:$('body')
      });
  }
}

criarBotoes({
  "Abrir": function(dados){
    alert("Abrindo...");
    //console.log(dados);
  }, 
  "Fechar": function(dados){
    alert("Fechando...");
    //console.log(dados);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

But I can not pass values to the function [text] ().

javascript jquery

asked by anonymous 09.09.2016 / 03:07

1 answer

Validation with Internationalization in Laravel 5.3 presenting error Problems with Frames in Python

score 1 · Accepted Answer

Good evening!

I modified your button object to be an array, so it becomes easier to iterate over it, and each button turns an object, being simpler to access its properties, it also includes two versions of code one using ES5 (Your case) and another using ES6 (if you are interested) in the end looks like this:

// Versão ES5
var botoes = [
  {
    texto: "Abrir",
    metodo: function(dados){
      alert("Abrindo...");
      console.log(dados);
    }  
  },
  {
    texto: "Fechar",
    metodo: function(dados){
      alert("Fechar...");
      console.log(dados);
    },
  }
];

botoes.forEach(function(botao) {
  $('<button>', {
    text: botao.texto,
    click: botao.metodo,
    appendTo: $('body')
  });
});

//Versão ES6
const botoes = [
  {
    texto: "Abrir",
    metodo: (dados) => {
      alert("Abrindo...");
      console.log(dados);
    }  
  },
  {
    texto: "Fechar",
    metodo: (dados) => {
      alert("Fechar...");
      console.log(dados);
    },
  }
];

botoes.forEach((botao) => {
  $('<button>', {
    text: botao.texto,
    click: botao.metodo,
    appendTo: $('body')
  });
});