NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: jedna událost pro elementy #element1, #element2, ...

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

Aktivity
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:7.9.2013 16:30

Zdravíčko, mám na stránce zatím 4 položky, při kliknutí na ně se zobrazí odpovídající článek, kód je následující:

$("#article1-link").click(function () {
  $('#article1').slideDown(300);
  $('#darken').fadeIn("slow");
});

Ale dost pravděpodobně není nejšťastnější řešení psát událost pro #article1, #article2 atd, už jenom kvůli tomu, že časem budou přibývat další. Jak to cele shrnout do jedné události? Moje znalosti jQuery jsou velice omezené, ode dneška se jím postupně prokousávám :)

Díky, FunebrakCZ

Odpovědět
7.9.2013 16:30
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:7.9.2013 21:10

Možná se to trošku utopilo díky diskusi ohledně baterek a souborů v php, tak se připomínám :P

Nahoru Odpovědět
7.9.2013 21:10
Neaktivní uživatelský účet
Avatar
Drahomír Hanák
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Drahomír Hanák:7.9.2013 21:16

Můžeš si pomoct data atributy:

$('[data-animation-target]').click(function() {
   var element = $(this);
   $(element.data('animationTarget')).addClass('animations-slide-down');
});

<button data-animation-target="#article1">Spusť animaci</button>
 
Nahoru Odpovědět
7.9.2013 21:16
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:7.9.2013 21:20

stejně jako v css ...

$('article1, article2, article3').slideDown();

nebo také třeba

$('main > article').each();
Editováno 7.9.2013 21:21
Nahoru Odpovědět
7.9.2013 21:20
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Drahomír Hanák
Neaktivní uživatel:8.9.2013 9:04

Tohle je skvělý, to použiju :)

Nahoru Odpovědět
8.9.2013 9:04
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Honza Bittner
Neaktivní uživatel:8.9.2013 9:06

To je mi na prd jedno jak druhý, protože potřebuju otevřít vždycky jeden jedinej, podle toho na který odkaz (respektive položku seznamu) jsem kliknul :)

Tady na téhle stránce -> novinky -> aktuality -> klikni na první položku v seznamu :)

http://www.funebrak.hys.cz/workspace3/

Nahoru Odpovědět
8.9.2013 9:06
Neaktivní uživatelský účet
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:8.9.2013 9:22

jo tak to jsem předtím asi nepochopil otázku no ;)

Nahoru Odpovědět
8.9.2013 9:22
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:8.9.2013 17:09

Tak pánové, řešení je na světě :) Trošku jsem si s tím pohrál a ve výsledku mám toto:

JS:

// Clicking on news list items will display the article
$(".article-link").click(function () {
        if($('#article' + $(this).data('id')).length) {
                $('#article' + $(this).data('id')).slideDown(100);
                $('#darken').fadeIn(700);
        }
});

$(".js-article,#darken").click(function () {
        $('.js-article').slideUp(100);
        $('#darken').fadeOut(300);
});

HTML:

      <!-- Article links -->
      <li class="article-link" data-id="1">
        ...
      </li>
      <li class="article-link" data-id="2">
        ...
      </li>
...

<!-- Articles -->
<article id="article1" class="js-article">
  <h2>Article 1</h2>

  <p>Nějaký text</p>
</article>

<article id="article2" class="js-article">
  <h2>Article 2</h2>

  <p>Jiný text</p>
</article>

CSS:

/* the "think" behind the article, that makes everything else darker :D */
#darken{
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* not supported RGBa */
        background: rgb(0, 0, 0) transparent;
        /* 80% black */
        background: rgba(0, 0, 0, 0.8);
        /* IE 5.5 - 7*/
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bb000000, endColorstr=#bb000000);
        /* IE 8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#bb000000, endColorstr=#bb000000)";
        display: none;
}

/* class for articles */
.js-article{
        width: 900px;
        height: 90%;
        position: fixed;
        top: 5%;
        left: 50%;
        margin-left: -460px;
        background: #000;
        border: 5px solid #8c7243;
        display: none;
}
Editováno 8.9.2013 17:12
Nahoru Odpovědět
8.9.2013 17:09
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:8.9.2013 17:13

Drahomír Hanák, Honza Bittner, díky ;)

Nahoru Odpovědět
8.9.2013 17:13
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:8.9.2013 17:22

Třeba se to někomu bude hodit, teď ještě přidám nějaký křížek nebo jen text na zavírání a bude to dobré :) Takhle to vypadá

Nahoru Odpovědět
8.9.2013 17:22
Neaktivní uživatelský účet
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 10 zpráv z 10.