FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Vladislav Domin
Člen
Avatar
Vladislav Domin:23.6.2017 14:13

Zdravim, potrebujem spravit, aby po kliknuti na anchor sa skryl/zobrazil .product-detail , skusal som rozne funkcie, kt. som nasiel na internete, ale nefungovalo to vobec. Bol by som rad, za kazdu radu.

<div class="product">
            <div class="product-head">
                <h2>Call of Duty 4</h2>
            </div>
            <div class="product-image">
                <a href="javascript:void(0);" onclick="toggleDetails()">
                    <div class="overlay"></div>
                    <img src="obrazky/hry/CODBO_medium.png">
                </a>
            </div>
            <div class="product-detail">
                <table>
                    <tr>
                        <td>Rozsah slotov</td>
                        <td>8-64</td>
                    </tr>
                    <tr>
                        <td>Cena / slot</td>
                        <td>0.50e</td>
                    </tr>
                    <tr>
                        <td>Verzia</td>
                        <td>Aktuálna</td>
                    </tr>
                </table>
            </div>
        </div>

<div class="product">
            <div class="product-head">
                <h2>Left 4 Dead 2</h2>
            </div>
            <div class="product-image">
                <a href="javascript:void(0);" onclick="toggleDetails();">
                    <div class="overlay"></div>
                    <img src="obrazky/hry/L4D2_medium.png">
                </a>
            </div>
            <div class="product-detail">
                <table>
                    <tr>
                        <td>Rozsah slotov</td>
                        <td>8-64</td>
                    </tr>
                    <tr>
                        <td>Cena / slot</td>
                        <td>0.50e</td>
                    </tr>
                    <tr>
                        <td>Verzia</td>
                        <td>Aktuálna</td>
                    </tr>
                </table>
            </div>
        </div>
 
Odpovědět
23.6.2017 14:13
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na Vladislav Domin
Matyáš Procházka:23.6.2017 14:24

Používáš jQuery nebo ne?

S jQuery takto

$(this).closest(".product").find(".product-detail").show();
 
Nahoru Odpovědět
23.6.2017 14:24
Avatar
Matyáš Procházka
Člen
Avatar
Matyáš Procházka:23.6.2017 14:25

"closest" najde odpovídajícího předka a "find" zase odpovídajícího potomka

 
Nahoru Odpovědět
23.6.2017 14:25
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:23.6.2017 14:34

Dost elegantní a pure CSS řešení je udělat logiku přes checkbox, label a nějaký div s obsahem. ;)

Nahoru Odpovědět
23.6.2017 14:34
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Vladislav Domin
Člen
Avatar
Odpovídá na Matyáš Procházka
Vladislav Domin:23.6.2017 14:50

to iste riesenie som skusal, ale praveze nefungovalo

 
Nahoru Odpovědět
23.6.2017 14:50
Avatar
Wal De Mar-Lad
Člen
Avatar
Odpovídá na Vladislav Domin
Wal De Mar-Lad:23.6.2017 14:55

Ako prvé by si mal najskôr odstrániť z kódu inline javascript, tak sa to už dnes nerobí. Prepíš to napríklad takto:

<div class="product">
  <div class="product-head">
    <h2>Call of Duty 4</h2>
  </div>
  <div class="product-image">
    <a href="#" class="toggleDetails">
      <div class="overlay"></div>
      <img src="obrazky/hry/CODBO_medium.png">
    </a>
  </div>
  <div class="product-detail">
    <table>
      <tr>
        <td>Rozsah slotov</td>
        <td>8-64</td>
      </tr>
      <tr>
        <td>Cena / slot</td>
        <td>0.50e</td>
      </tr>
      <tr>
        <td>Verzia</td>
        <td>Aktuálna</td>
      </tr>
    </table>
  </div>
</div>

<div class="product">
  <div class="product-head">
    <h2>Left 4 Dead 2</h2>
  </div>
  <div class="product-image">
    <a href="#" class="toggleDetails>
      <div class="overlay"></div>
      <img src="obrazky/hry/L4D2_medium.png">
    </a>
  </div>
  <div class="product-detail">
    <table>
      <tr>
        <td>Rozsah slotov</td>
        <td>8-64</td>
      </tr>
      <tr>
        <td>Cena / slot</td>
        <td>0.50e</td>
      </tr>
      <tr>
        <td>Verzia</td>
        <td>Aktuálna</td>
      </tr>
    </table>
  </div>
</div>

A následne potrebuješ javascript, ktorý by skrýval / odkrýval detaily. Napríklad takýto:

$('.toggleDetails').click(function (evt) {
  evt.preventDefault
  $(this).parent().next().slideToggle()
})

Pozor. Tento javascript využíva knižnicu jQuery. Takže najskôr si musíš do kódu pripnúť jQuery, a až za ním použiť tento skript. Ak by si nevedel ako na to, napíš sem znovu.

Nahoru Odpovědět
23.6.2017 14:55
Libraries over frameworks...
Avatar
Wal De Mar-Lad
Člen
Avatar
Odpovídá na Wal De Mar-Lad
Wal De Mar-Lad:23.6.2017 15:00

Hopla, preventDefault je metóda a zabudol som dať za ňu zátvorky. Oprava:

$('.toggleDetails').click(function (evt) {
  evt.preventDefault()
  $(this).parent().next().slideToggle()
})
Nahoru Odpovědět
23.6.2017 15:00
Libraries over frameworks...
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na Vladislav Domin
Matyáš Procházka:23.6.2017 15:04

Vytvořil jsem ti dvě řešení:

https://jsfiddle.net/de2dbd0h/
https://jsfiddle.net/nx5prkh7/

První se načítá po načtení elementů, a nevyužívá tedy onclick.
Druhá využívá onclick, ale funkce se musí načíst před elementama, aby fungoval onclick (ve kterém se funkci posílá "this").

Editováno
 
Nahoru Odpovědět
23.6.2017 15:04
Avatar
Wal De Mar-Lad
Člen
Avatar
Odpovídá na Wal De Mar-Lad
Wal De Mar-Lad:23.6.2017 15:20

To je vlastne dobrý nápad, tiež Ti dám príklad na jsfiddle.

Nahoru Odpovědět
23.6.2017 15:20
Libraries over frameworks...
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.