Diskuze: jQuery - problém

JavaScript JavaScript jQuery - problém

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Ahoj .. snažím se udělat v jQuery pár divů které by měnily barvu když DRŽÍTE MYŠ A NAJEDETE NA NĚ ...

zkoušel jsem:

$(document).ready(function(){

   for(i=0; i<100;i++)
   {
    $('#divplace').append("<div class='item'></div>");
   }

   $('.item').mousedown(function(){
      $('.item').mouseenter(function(){
          $(this).css('background','red')
      });
   });

});

ale bohužel když jednou kliknu a pustím myš tak se pořád obarvují divy ..
nevíte někdo jak to udělat abych musel držet myš pro obarvování ? :O ...

děkuji :)

tady je online : http://blbost.ihobi.cz/

Odpovědět 12.4.2013 15:14
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:

Si udělej proměnnou drzeno a tu v mousedown dej na true a v mouseup na false ;-) Pak se na ni ptej v mouseenter.

Nahoru Odpovědět 12.4.2013 15:16
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Honza Bittner
Redaktor
Avatar
Nahoru Odpovědět 12.4.2013 15:18
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na David Čápka
Honza Bittner:

Udělal jsem toto :

$(document).ready(function(){

   for(i=0; i<100;i++)
   {
    $('#divplace').append("<div class='item'></div>");
   }

   var drzeno = false;

   $(document).mousedown(function(){
      this.drzeno = true;
   });

   $(document).mouseup(function(){
      this.drzeno = false;
   });

   if (drzeno == true)
   {
      $('.item').mouseenter(function(){
          $(this).css('background','red')
      });
   }
});

ale nefunguje mi to ... poradil bys mi kde mám chybu ? :)

Nahoru Odpovědět 12.4.2013 15:26
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:
if (drzeno == true)

musíš mít v tom mouseenter a nejsem si jistý, jestli to tu proměnnou takhle uvidí. Můžeme být oškliví a udělat ji globální. Jinak bys to musel řešit asi přes objekty.

Nahoru Odpovědět 12.4.2013 15:28
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na David Čápka
Honza Bittner:

jojo .. udělal jsem to do toho .. čili takto :

var drzeno = false;

   $(document).mousedown(function(){
      this.drzeno = true;

      if (this.drzeno == true)
        {
          $('.item').mouseenter(function(){
            $(this).css('background','red')
          });
        }
   });

   $(document).mouseup(function(){
      this.drzeno = false;
   });

ale pořád když zvednu prst z myše tak barví ..

Nahoru Odpovědět 12.4.2013 15:29
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:

Zkus tohle:

drzeno = false;

$(document).mousedown(function(){
   drzeno = true;
});

$(document).mouseup(function(){
   drzeno = false;
});

$('.item').mouseenter(function(){
   if (drzeno)
      $(this).css('background','red')
});
Nahoru Odpovědět  +1 12.4.2013 16:08
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na David Čápka
Honza Bittner:

děkuju moc :) .. pomohl jsi mi ;)

Nahoru Odpovědět 12.4.2013 16:14
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:

Ta proměnná bez var je chápána jako globální, což je velmi ošklivé. Bohužel nevím, jak to jinak jednoduše vyřešit bez objektů a objekty nejsou v JS nic jednoduchého, takže pro začátek to je takhle asi lepší.

Nahoru Odpovědět 12.4.2013 16:20
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Honza Bittner
Redaktor
Avatar
Nahoru Odpovědět 12.4.2013 16:24
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Drahomír Hanák:

V HTML5 můžeme používat data atributy a jQuery nabízí metodu .data, která nastaví nebo předá uloženou hodnotu.

$('.item').data('drzeno', false);

$(document).mousedown(function(){
   $('.item').data('drzeno', true);
});

$(document).mouseup(function(){
   $('.item').data('drzeno', false);
});

$('.item').mouseenter(function(){
   if ($(this).data('drzeno'))
      $(this).css('background','red')
});

Rozhodně ne globální proměnnou :) Můžeš to aplikovat na kterýkoli prvek, ale mysli na to, že data se váží právě k tomu jednomu prvku (resp. k tomu, ktrerý odpovídá CSS selektoru). Nebo ještě lépe si vytvoř closure:

(function() {

// Tohle už není globální proměnná
// má platnost pouze v closure téhle anonymní funkce
var drzeno = false;

$(document).mousedown(function(){
   drzeno = true;
});

$(document).mouseup(function(){
   drzeno = false;
});

$('.item').mouseenter(function(){
   if (drzeno)
      $(this).css('background','red')
});

})();

// Vypíše undefined
console.log(drzeno);
Editováno 12.4.2013 16:36
 
Nahoru Odpovědět  +1 12.4.2013 16:35
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Drahomír Hanák
Honza Bittner:

děkuju .. hned to půjdu vyzkoušet :)

Nahoru Odpovědět 12.4.2013 16:39
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Drahomír Hanák
Honza Bittner:

Všechno mi funguje .. teď jsem narazil na snad poslední chybu a to tu, že když nějak špatně chytíš myš a objeví se PŘEŠKRTNUTÉ KOLEČKO tak po spuštění pořád myš barví .. nevíš jak tomuto zamezit ? :)

http://blbost.ihobi.cz/

Editováno 12.4.2013 16:43
Nahoru Odpovědět 12.4.2013 16:42
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Drahomír Hanák
David Čápka:

Netušil jsem, že to bude potom přístupné v těch eventech, tohle je dobré :)

Editováno 12.4.2013 16:46
Nahoru Odpovědět  +1 12.4.2013 16:46
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:

Protože se nevyvolá ta mouseup a drzeno zůstane na true. Jedině odchytnou nějakou tu událost drag and drop, podívej se do manu jquery, jestli na to něco má.

Nahoru Odpovědět 12.4.2013 16:48
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Drahomír Hanák:

Scope funkce se dědí, ale o úroveň výš už dostupný (logicky) není :) Když definuješ proměnnou ve funkci, bude dostupná ve všech funkcích, co jsou uvnitř.

Honza Bittner zkus zakázat selection v CSS:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
 
Nahoru Odpovědět 12.4.2013 17:02
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Drahomír Hanák
Honza Bittner:

bohužel, pořád to PŘEŠKRTLÉ KOLEČKO jde .. :/

Editováno 12.4.2013 17:08
Nahoru Odpovědět 12.4.2013 17:08
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Drahomír Hanák
Honza Bittner:

http://www.favicon.cc/
tady to mají udělané také .. ale funguje jim to .. nevím proč to mě dělá ty blbosti .. :D

Nahoru Odpovědět 12.4.2013 17:17
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
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 18 zpráv z 18.