JS / jQuery - Multiple tasks at a button

Question

JS / jQuery - Multiple tasks at a button

Navigation

#1 by (0 votes)

1

I'm inserting data from a json file into an html div, content is added from a button. everything is working!

I just want to replace the contents of the div with each click of this button. ex:

1) First click: the name of person 1 is displayed
2) second click: the name of person 1 is replaced by the name of person 2

json
{
"person1": { "name": "Luke", "age": 22
},

"person2": {
"name": "Rafael", "age": 33
}
}

function iniciante() {
   $(document).ready(function () {
       $("#enviar").click(function () {
           $.getJSON("data/dados.json", function(data) {
               $.each(data, function(key, value){ //a key é o "cliente1" e o value sao os valores dele (name, idade)
                if (value.titulo == 'Os jovens e o computador') { value.titulo = 'indisponivel'} //casp da entrevista
                    $("#area-postagem").append("<p class=fonte-navegacao>" + value.titulo  + "</p>" + "<p class=fonte-navegacao>" + value.conteudo + "</p>  ")
               }) 
           })
       }); 
   });
}

* {
    margin: 0;
    padding: 0;
}
.fonte-navegacao {
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif
}
.verde {
    color: green;
}
#barra-navegacao {
    position: fixed;
    background: #e5eeee;
    border-bottom: rgb(169, 175, 169) solid 1px;
    width: 100%;
    height: 30px;
    margin-bottom: 10px;
    z-index: 1;
}
#area-navegacao {
    padding: 3px;
    margin: 0 auto;
    width: 740px;
}
#area-postagem {
    position: relative;
    top: 40px;
    background: rgb(212, 212, 209);
    padding: 15px;
    margin: 0 auto;
    width: 740px;
    height: 340px;
    border-radius: 20px;
    margin-bottom: 15px;
    
}
#area-logo {
 float: left;   
}
#area-links {
float: right;      
}

<!DOCTYPE HTML>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Testando</title>
        <link rel="stylesheet" type="text/css" href="estilos.css">
        <script src="script.js"> </script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></head><bodyonload="iniciante()">
        <div id="barra-navegacao">
            <div id="area-navegacao" class="fonte-navegacao">
                <div id="area-logo">
                    <span class="verde">Evolu</span>Tech</b>    
                </div>
                <div id="area-links">
                    link 1 | link2 | link3 | link4
                </div>
            </div> 
        </div>
        
        <div id="area-postagem">
            <button id="enviar"> Enviar </button>
        </div>

    </body>
</html>

javascript html jquery css

asked by anonymous 28.10.2017 / 19:36

1 answer

I can not capture ROTA without using index in URL Problem with Android Programming. FOR [closed]

score 0 · Answer 1

On the first click on the "#submit" button, I want the name of the person to appear1, and on the second click I want the content to be replaced with the name of the person2.

The contents are appearing normally in the div, but I tried in some ways, and it only adds the same name below in the second click

Follow JSON: (I typed on my cell phone because I'm not home right now)

{
   "pessoa1" : {
    "nome": "Lucas", "idade": 22
   },

   "pessoa2" : {
    "nome": "Rafael", "idade": 33
   }
}