NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
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í.

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

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

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
FIT ČVUT alumnus :-) 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
FIT ČVUT alumnus :-) 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
Drahomír Hanák
Tvůrce
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
Člen
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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Matyáš Procházka
Člen
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.