javascript ALGUEM ME AJUDA

Leo Schneider · Dezembro 6, 2017

POR FAVOR ALGUEM ME AJUDA A ACHAR ERROS NO MEU CODIGO. O PROBLEMA NELE É QUE EU FIZ UM JS PRA FAZER O ESTILO BACKGROUND COLOR MUDAR NO FUNDO DOS CLASS==BLOCOS OU CADA UM POR ID(A,B,C,D,E,F,G,H,I)... SE ALGUEM PUDER RESPONDER EU AGRADEÇO..

<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title>APP FOE</title>

@import url('https://fonts.googleapis.com/css?family=Spectral+SC');

body {

background-image: url('https://i.pinimg.com/originals/76/36/5e/76365e38703aa2d2d9cfd3210ebb6d75.jpg');
background-size: 100%

}
#bloco {

           width: 1000px;
           display: block;
           margin: 100px auto 0 auto;

}
.blocos {

           background-color: rgba(141, 80, 80,.875);
           border-radius: 4px;
           margin: 10px;
           padding-top: 5px;
           padding-bottom: 5px;
           width: 300px;
           text-align: center;
           color: black;
           font-weight: 900;
           font-family: 'Spectral SC';
           font-size: 14px;

       }
       .linha {
           display: inline-block;
       }
       button {

           padding: 3px;
           margin: 3px 0 5px 0;
           background-color: rgba(0,0,0,.8);
           color: white;
           border: none;
           padding: 5px 12px;

}
h2{

margin: 5px 0 0 0 ;

}

</style>

}
}

</script>
</head>
<body>

   <div id="bloco">

       <div class="linha">
           <div class="blocos" id="a"><h2>       ARVAHALL       </h2>   <button onclick="a()">CLICK!</button>   </div>
           <div class="blocos" id="b"><h2>       BRISGARD       </h2>   <button onclick="b()">CLICK!</button>   </div>
           <div class="blocos" id="c"><h2>       CIRGARD           </h2>   <button onclick="c()">CLICK!</button>   </div>
       </div>

       <div class="linha">
           <div class="blocos" id="d"><h2>       DINEGU           </h2>   <button onclick="d()">CLICK!</button>   </div>
           <div class="blocos" id="e"><h2>       EAST-NAGACH       </h2>   <button onclick="e()">CLICK!</button>   </div>
           <div class="blocos" id="f"><h2>       FEL DRANGHYR   </h2>   <button onclick="f()">CLICK!</button>   </div>
       </div>

       <div class="linha">
           <div class="blocos" id="g"><h2>       GREIFENTAL       </h2>   <button onclick="g()">CLICK!</button>   </div>
           <div class="blocos" id="h"><h2>       HOUNDSMOOR       </h2>   <button onclick="h()">CLICK!</button>   </div>
           <div class="blocos" id="i"><h2>       JAIMS           </h2>   <button onclick="i()" >CLICK!</button>   </div>
       </div>

</div>

</body>
</html>

Eziquiel · Dezembro 7, 2017

Olá.

A biblioteca JQuery é excelente para se estudar.

Esse problema pode ser facilmente resolvido criando uma classe chamada "active", a quem será atribuído o background na cor secundária.

Ao clicar no botão, a div que o contém, cuja classe se chama "bloco", receberá uma nova classe, passando a ter duas classes, exemplo: <div class="blocos active" id="a">. Assim sendo, ao receber a classe "active", o elemento passa a receber os atributos CSS atribuídos à esta classe, que é uma nova cor de fundo.

O que o jQuery faz é chavear esta classe com a função toggleClass, atribuindo a classe "active" ao elemento quando não tiver, ou removendo a classe do elemento quando tiver.

Veja o exemplo funcional:

<!doctype html>
<!DOCTYPE html>
<html>
<head>
    <title>APP FOE</title>
    <meta charset="utf-8">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> 
 
    <style type="text/css">
        @import url('https://fonts.googleapis.com/css?family=Spectral+SC');
        body {
            background-image: url('https://i.pinimg.com/originals/76/36/5e/76365e38703aa2d2d9cfd3210ebb6d75.jpg');
            background-size: 100%
        }
        #bloco {
            width: 1000px;
            display: block;
            margin: 100px auto 0 auto;
        }
        .blocos {

            background-color: rgba(141, 80, 80,.875);
            border-radius: 4px;
            margin: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            width: 300px;
            text-align: center;
            color: black;
            font-weight: 900;
            font-family: 'Spectral SC';
            font-size: 14px;
        }
        .blocos.active{
            background-color: rgba(81, 112, 78,.875);
        }
        .linha {
            display: inline-block;
        }
        button {
            padding: 3px;
            margin: 3px 0 5px 0;
            background-color: rgba(0,0,0,.8);
            color: white;
            border: none;
            padding: 5px 12px;
            cursor: pointer;
        }
        h2{
            margin: 5px 0 0 0 ;
        }
    </style>

<script>
  $(document).ready(function(){
    $('.blocos button').click(function(){
      $(this).parent('.blocos').toggleClass('active')    
    })
  })
</script>

</head>
<body>
    <div id="bloco">
        
        <div class="linha">
            <div class="blocos" id="a"><h2>        ARVAHALL        </h2>    <button>CLICK!</button>    </div>
            <div class="blocos" id="b"><h2>        BRISGARD        </h2>    <button>CLICK!</button>    </div>
            <div class="blocos" id="c"><h2>        CIRGARD            </h2>    <button>CLICK!</button>    </div>
        </div>
        <div class="linha">
            <div class="blocos" id="d"><h2>        DINEGU            </h2>    <button>CLICK!</button>    </div>
            <div class="blocos" id="e"><h2>        EAST-NAGACH        </h2>    <button>CLICK!</button>    </div>
            <div class="blocos" id="f"><h2>        FEL DRANGHYR    </h2>    <button>CLICK!</button>    </div>
        </div>
        <div class="linha">
            <div class="blocos" id="g"><h2>        GREIFENTAL        </h2>    <button>CLICK!</button>    </div>
            <div class="blocos" id="h"><h2>        HOUNDSMOOR        </h2>    <button>CLICK!</button>    </div>
            <div class="blocos" id="i"><h2>        JAIMS            </h2>    <button>CLICK!</button>    </div>
        </div>
    </div>
</body>
</html>

Entrar

Arquivado

javascript ALGUEM ME AJUDA

Recommended Posts

Leo Schneider 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eziquiel 96

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante