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

JavaScript JavaScript Onclick - vracení na původní stav

Avatar

Člen
Avatar
:

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
Redaktor
Avatar
Odpovídá na
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar

Člen
Avatar
Odpovídá na Honza Bittner
:

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:

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  -1 18.1.2014 12:33
Harmonie těla a duše, to je to, oč se snažím! :)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na
Honza Bittner:

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  +1 18.1.2014 12:57
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Pavel Mareš
Redaktor
Avatar
Pavel Mareš:

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
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
Avatar

Člen
Avatar
:

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
Tým ITnetwork
Avatar
Odpovídá na
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);

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  +1 18.1.2014 14:06
Avatar
Matyáš Procházka:

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  -1 18.1.2014 15:21
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Matyáš Procházka
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Matyáš Procházka:

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.