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

JavaScript JavaScript jedna událost pro elementy #element1, #element2, ...

Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

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  +1 7.9.2013 21:10
Creating websites is awesome till you see the result in another browser ...
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na Jiří Gracík
Drahomír Hanák:

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  +2 7.9.2013 21:16
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Jiří Gracík
Honza Bittner:

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  +2 7.9.2013 21:20
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Drahomír Hanák
Jiří Gracík:

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

Nahoru Odpovědět 8.9.2013 9:04
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Honza Bittner
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Jiří Gracík
Honza Bittner:

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

Nahoru Odpovědět 8.9.2013 9:22
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Nahoru Odpovědět 8.9.2013 17:13
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

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  +1 8.9.2013 17:22
Creating websites is awesome till you see the result in another browser ...
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.