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í.
Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu. Zároveň využij slevovou akci až 30 % zdarma při nákupu e-learningu - Více informací.
discount 30 + hiring

Diskuze: Onclick - vracení na původní stav

Aktivity
Avatar

Člen
Avatar
:18.1.2014 12:16

Zdravím, mám pomocí funkce Onclick vytvořeno, že se mi element posune, ale nevím jak udělat aby se po dalším kliknutí vrátil zpět, poradíte někdo? Na netu jsem hledal, ale nic nenašel.

 
Odpovědět
18.1.2014 12:16
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na
Honza Bittner:18.1.2014 12:20

Pokud se to má být jen tam a zpět, doporučuji mu přiřadit vždy třídu.
Tzn. třeba .active{ left: 200px; }

Nahoru Odpovědět
18.1.2014 12:20
Absolvent FIT ČVUT :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar

Člen
Avatar
Odpovídá na Honza Bittner
:18.1.2014 12:22

Nemyslím, že při kliknutí změní pozici a pak zpět, potřebuji aby tam chvíli zůstal a až uživatel klikne podruhé tak aby se vrátil zpět.

 
Nahoru Odpovědět
18.1.2014 12:22
Avatar
MrPabloz
Člen
Avatar
MrPabloz:18.1.2014 12:33

Nedělám v JS tak ti to napíšu obecně, doufám že to pochopíš :)

var atribut=1;
if(atribut==1)//je jedno jak to budeš mít
{
    atribut=0;
    posunuti o danou hodnotu;
}
else
{
    atribut=1;
    posunuti zpet o danou hodnotu;
}

A pak jen budeš volat v onclicku daný if a máš to :) jen ten atribut musíš definovat jako globální se mi zdá, nebo jak to tam je

Nahoru Odpovědět
18.1.2014 12:33
Harmonie těla a duše, to je to, oč se snažím! :)
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na
Honza Bittner:18.1.2014 12:57

Však to jsem myslel, popíšu to v jQuery :

$('selektor').click(function(){
  $(this).toggleClass('active');
});
Editováno 18.1.2014 12:57
Nahoru Odpovědět
18.1.2014 12:57
Absolvent FIT ČVUT :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Pavel Mareš
Tvůrce
Avatar
Pavel Mareš:18.1.2014 13:01

Pokud to chápu správně tak chceš něco velmi jednoduchého skrze JQuery.
Stačí když při kliknutí na daný prvek například do proměnné clicked uložíš 1 a když klikne podruhé kontroluješ jestli už uživatel klikl. A dám příklad u menu: Poprvé klikne posuneš prvek a 200px doprava a uložíš si do proměnné clicked 1. A když klikne, zkontroluješ jestli je proměnná clicked 1 a pokud ano posuneš to o 200px doleva, pokud ne posuň prvek o 200px doleva.

Nahoru Odpovědět
18.1.2014 13:01
Však ono půjde ...
Avatar

Člen
Avatar
:18.1.2014 13:51

A nevíte jak by to šlo udělat v js? JQuery moc neovládám.

 
Nahoru Odpovědět
18.1.2014 13:51
Avatar
Odpovídá na
Drahomír Hanák:18.1.2014 14:06
var element = document.querySelector('#elem');
element.addEventListener('click', function() {
    var isActive = this.className.match(/active/);
    if (isActive) {
        this.className = this.className.replace(/ ?active/, '');
    } else {
        this.className += ' active';
    }
}, false);

Nebo pro víc elementů:

var clickHandler = function() {
    var isActive = this.className.match(/active/);
    if (isActive) {
        this.className = this.className.replace(/ ?active/, '');
    } else {
        this.className += ' active';
    }
};
var elements = Array.prototype.slice.call(document.querySelectorAll('#elem'), 0);
elements.forEach(function(element) {
    element.addEventListener('click', clickHandler, false);
});
Editováno 18.1.2014 14:07
 
Nahoru Odpovědět
18.1.2014 14:06
Avatar
Matyáš Procházka:18.1.2014 15:21

Jestli jsem dobře pochopil tak, pokud chceš JS bez JQuery, tak nejjednodušší to bude takto:

HTML:

<div id="posunutyPredmet" onClick="posun()"></div>

JS:

var pozice = 0;
function posun() {
  if (pozice==0) {
    pozice = 1;
    Posunuti o danou hodnotu
  }
  else {
    pozice = 0;
    Posun na defaultni hodnotu
  }
}
Editováno 18.1.2014 15:22
 
Nahoru Odpovědět
18.1.2014 15:21
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Matyáš Procházka
Honza Bittner:18.1.2014 15:24

Jak psal Drahomír Hanák

var element = document.querySelector('#elem');
element.addEventListener('click', function() {
    var isActive = this.className.match(/active/);
    if (isActive) {
        this.className = this.className.replace(/ ?active/, '');
    } else {
        this.className += ' active';
    }
}, false);
Nahoru Odpovědět
18.1.2014 15:24
Absolvent FIT ČVUT :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Odpovídá na Honza Bittner
Matyáš Procházka:18.1.2014 15:32

Jojo, jen jsem si říkal, že tak to bude více přehlednější...

 
Nahoru Odpovědět
18.1.2014 15:32
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 11 zpráv z 11.