Diskuze: Zobrazeni sekce

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

Aktivity

adder

Člen

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.

Matyáš Procházka

Člen

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

adder

Člen

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.

Honza Bittner

Tvůrce

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.

Honza Bittner

Tvůrce

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.

adder

Člen

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.

Honza Bittner

Tvůrce

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.

adder

Člen

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.

Honza Bittner

Tvůrce

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

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.

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 9 zpráv z 9.

Nejčastěji vyhledáváné

Diskuze: Zobrazeni sekce