Diskuze: Změna obsahu - JQuery

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

pokusnicek

Člen

pokusnicek:6.5.2017 12:54

Ahoj,

jsem začátečník v JQ a chci se zeptat, jak změnit obsah, po stisknutí na tlačítko? Mám tři boxy, když kliknu vždy na nový, tak se mi obsah změní. Ale jakmile se vrátím na stisklé tlačítko,tak se mi již box nezobrazí.

<!DOCTYPE html>
<html>
<head>
        <title>Pozicování</title>
    <meta charset="utf-8">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    <style type="text/css">
         .obal{
                width:400px;
                height:450px;
                border:1px solid black;
         }
         .red{
                background:#bf4040;
                width:400px;
                height:450px;
                position:absolute;top:8%;
         }
         .orange{
                background:orange;
                width:400px;
                height:450px;
                position:absolute;top:8%;
         }
         .purple{
                background:purple;
                width:400px;
                height:450px;
                position:absolute;top:8%;
         }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.orange').hide();
         $('.purple').hide();
           $('.ukazred').click(function(){
                 $('.red').show();


           });
           $('.ukazorange').click(function(){
                 $('.orange').show();
                 $('.red').hide();


                 $('.ukazpurple').click(function(){
                 $('.purple').show();
                 $('.orange').hide();
                 $('.red').hide();



              });

           });

             });


    </script>
</head>
<body>
    <h1>Zkouška pozicování</h1>
     <section class="obal">
          <section class="red"></section>
          <section class="orange"></section>
          <section class="purple"></section>
     </section>

     <button class="ukazred">Ukaž červený box</button>
     <button class="ukazorange">Ukaž orange box</button>
         <button class="ukazpurple">Ukaž fialový box</button>

</body>
</html>

Odpovědět

6.5.2017 12:54

Honza Bittner

Tvůrce

Honza Bittner:6.5.2017 13:18

Jednoduché.

máš kód jako prase a dokonce máš i vnořené click eventy, což nikdy nefunguje moc podle představ.
ve tvých click eventech máš většinou jen show, tj. se dostaneš do stavu, kdy je jeden element nad ostatními a ty překrývá a je pak jedno na co klikáš, když ten úplně nahoře neskrýváš.

Lehce jsem upravil, inspiruj se:

https://jsfiddle.net/4by9590m/2/

Akceptované řešení
+5 Zkušeností

Nahoru Odpovědět

6.5.2017 13:18

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

pokusnicek

Člen

pokusnicek:6.5.2017 13:20

Děkuju Honzo.

Nahoru Odpovědět

6.5.2017 13:20

Naučíme tě pracovat na home-office.

Zjistit více...

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.