Toon posts:

[Javascript] Element herstellen

Pagina: 1
Acties:

Onderwerpen


  • ZeroXT
  • Registratie: December 2007
  • Laatst online: 23:30
Beste mensen,

Ik probeer de originele staat van een element terug te zetten. Ik heb een div element die met mouseover een groene border krijgt. Op moment dat er een mouseout plaats vindt moet deze de originele staat (dus rode border) weer terug krijgen. Dat lukt met de onderstaande code:

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id="div" style="width:100px; height:100px; background:#000; border:10px solid green"></div>

<script type="application/javascript">
var div = document.getElementById('div');

original();

div.onmouseover = function()
{
    this.style.border = '10px solid red';
}

div.onmouseout = function()
{
    original();
}

function original()
{
    if(div.original)
    {
        div.parentNode.replaceChild(div.original, div);
        div.original = null;
    }
    else
    {
        div.original = div.cloneNode(true);
    }
}
</script>



Dit hoeft natuurlijk niet alleen met borders te zijn maar kan ook zijn met andere style attributen of de content van de div moet weer hersteld worden etc. anders had ik alleen de style opgeslagen en niet het hele element.

Echter ga ik er met mijn muis nogmaals overheen gebeurd er helemaal niets.

Ik kan hier geen bestaande library voor gebruiken omdat ik er zelf een aan maken ben voor de fun. Bovenstaande code is ook snel in elkaar gemaakt om het probleem na te bootsen. Dit is de daadwerkelijke code:

JavaScript:
1
2
3
4
5
6
7
$('div1').css({'border' : '10px solid red'}).origineel().bind('mouseover', function()
{
    this.css({'border' : '10px solid green'});
}).bind('mouseout', function()
{
    this.origineel();
});


Kan iemand mij helpen om dit probleem op te lossen? :)

  • Acid_Burn
  • Registratie: Augustus 2001
  • Laatst online: 25-05 15:43
Waarom doe je dat niet gewoon met css ipv javascript te gebruiken?

Glass Eye Photography | Zelfbouw wireless fightstick | Mijn puzzel site


  • R4gnax
  • Registratie: Maart 2009
  • Laatst online: 16-05 22:53
Gebruik CSS classes ipv inline CSS, daar zijn ze tenslotte voor.

Wil je dat niet, dan kun je eens kijken in de broncode van jQuery en jQuery UI, specifiek in de secties die animatie en effects behandelen. Ik kan je nu al verklappen dat dat een flinke bult code is.

  • ZeroXT
  • Registratie: December 2007
  • Laatst online: 23:30
Dankje voor de replies maar zoals ik al zei; het gaat niet alleen om de css. de CSS in deze code was maar een voorbeeld. Ik wil gewoon een kopie kunnen maken en die later weer terug kunnen zetten.

  • Acid_Burn
  • Registratie: Augustus 2001
  • Laatst online: 25-05 15:43
Probleem is nu dat je een referentie maakt naar je element, geen kopie. Dus als je dan original aanroept vervang je het element met zichzelf.

Ik vind het trouwens een vreemde consructie om zo die original op te slaan. Is dat gangbaar?

[Voor 25% gewijzigd door Acid_Burn op 11-05-2011 18:50]

Glass Eye Photography | Zelfbouw wireless fightstick | Mijn puzzel site


  • ZeroXT
  • Registratie: December 2007
  • Laatst online: 23:30
Of dat gangbaar is, weet ik niet maar welk stukje code bedoel je?

ik maak juist geen referentie want ik clone het element en vervang het daarna maar mijn mouseover gaat daarmee verloren, dus de events.

  • pieturp
  • Registratie: April 2004
  • Laatst online: 00:03

pieturp

gaffa!

Je gooit allerlei custom properties naar een DOM element. Da's Vies™
(Gebruik liever een eigen object / var / whatever)

Je gebruikt onmouseover en onmouseout properties van een DOM element i.p.v. nette eventHandlers. Da's weer Vies™
(zoek eens op "addEventListener")

Als je dan een replace van je element node doet, dan vind ik het niet raar dat je dingen gaat missen (eventHandlers of custom properties bijvoorbeeld).

Last but not least: verwijzingen naar functies doe je door naar de functie te verwijzen; niet door ze opnieuw aan te roepen:
JavaScript:
1
div.onmouseout = original;

Oftewel:
JavaScript:
1
yourDiv.addEventListener('mouseout', original, false);

... en etcetera en zo

Pagina: 1


Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee