NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Zobrazeni sekce

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

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
adder
Člen
Avatar
adder:4.4.2014 18:43

ahoj, chtě bych se zeptat, jak mám zobrazit celou, ve které je h1 a paragraf? když vyhodím např. p a dám mu id shodné s odkazem, tak to funguje. Díky.

$(document).ready(function(){
        $("ul a").click(function(){
          var produkt = this;
          var id_produkt = $(produkt).attr('href');

          $(id_produkt).show();
         });
      });
Odpovědět
4.4.2014 18:43
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na adder
Matyáš Procházka:5.4.2014 0:38

Zajímalo by mě, co myslíš tím "celou"? Nějak zhruba jsem pochopil, co děláš... Ale, co přesně chceš, nechápu... nemohl bys to napsat nějak srozumitelněji, popřípadě přiložit i HTML kód...

 
Nahoru Odpovědět
5.4.2014 0:38
Avatar
adder
Člen
Avatar
Odpovídá na Matyáš Procházka
adder:5.4.2014 9:39

celous sekci.. omlouvám se.. posílám html

<section id="xxx">
        <h1 class="bold">Nadpis</h1>
        <p class="listText">text text text</p>
      </section>
Nahoru Odpovědět
5.4.2014 9:39
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:5.4.2014 10:21

Pokud jsem tedy pochopil dobře, tak chceš měnit vyditelnost... Na to poslouží jQuery funkce .toggle().
Pokud chceš jen skrýt tak .hide() a pokud jen zobrazit tak .show().

Za předpokladu tohoto kódu:

...
<a href="#xxx">Otevři/zavři</a>
...
<section id="xxx">...</section>
...

Bude fungovat toto:

$(function(){
  $("a[href^='#']").on('click', function(e){
    var id_produkt = $(this).attr('href');
    console.log(id_produkt);
    $(id_produkt).toggle(500);
    e.preventDefault();
  });
});
Editováno 5.4.2014 10:21
Nahoru Odpovědět
5.4.2014 10:21
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na adder
Honza Bittner:6.4.2014 19:28

Funguje?

Nahoru Odpovědět
6.4.2014 19:28
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
adder
Člen
Avatar
Odpovídá na Honza Bittner
adder:6.4.2014 19:37

je promiň, teď jsem si otoh všiml... zkouším a nejde. jsem to vyřešil poněkud nehezkým kódem.

$(document).ready(function(){
        var id_last_produkt;

        $('#leftMenuLists ul a').click(function(){
          var produkt = this;
          var id_produkt = $(produkt).attr('href');

          if (id_last_produkt !== id_produkt)
          {
             $('#downList h1'+id_last_produkt).slideUp(500);
             $('#downList p'+id_last_produkt).slideUp(500);
             $('#downList a'+id_last_produkt).slideUp(500);
             id_last_produkt = id_produkt;
          }
          $('#downList h1'+id_produkt).slideDown(500);
          $('#downList p'+id_produkt).slideDown(500);
          $('#downList a'+id_produkt).slideDown(500);
         });
      });
Nahoru Odpovědět
6.4.2014 19:37
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na adder
Honza Bittner:6.4.2014 19:42

Jakto že to nefunguje?

http://dev20.honzabittner.cz/

Tady mi to normálně zavírá/otevírá...

Nahoru Odpovědět
6.4.2014 19:42
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
adder
Člen
Avatar
Odpovídá na Honza Bittner
adder:6.4.2014 19:58

jo, už to funguje (měl jsem display: none;), ale né tak, jak bych si přál. chci, aby to nešlo vidět a po kliknutí vždy jen jedno viditelný. rád bych se zeptal, co přesně dělá

"a[href^='#']"
  • .

tohle má vypisovat na výstup ne?

console.log(id_produkt);

a tohle

e.preventDefault();
Editováno 6.4.2014 19:59
Nahoru Odpovědět
6.4.2014 19:58
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na adder
Honza Bittner:6.4.2014 20:04 
"a[href^='#']"

Vybere všechny odkazy, které mají jako odkaž něco co začíná na #, viz:
http://www.itnetwork.cz/…om-selektory
http://www.itnetwork.cz/…-selektory-2
http://www.itnetwork.cz/…-selektory-3

console.log(id_produkt);

Vypisuje do konzole, bylo to jen pro testování.

e.preventDefault();

Toto jednoduše řečeno zablokuje normální funkce, které by proběhly při kliku na ten element, tady konkrétně odkaz. Tzn. neodkáže na jinou stránku(tady v tomto případě nepřejede stránka na element s tím id) a také nevypíše nic do URL.
( zkus to zakomentovat a koukni se co se stane ;) )

Nahoru Odpovědět
+1
6.4.2014 20:04
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
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 9 zpráv z 9.