Ergebnis 1 bis 2 von 2
  1. #1
    ea sy ist offline Grünschnabel
    registriert
    25-08-2015
    Beiträge
    1

    Globale Variable in lokale ändern?

    Hi Leute,

    ich habe hier einen kl. Code geschrieben, der mit einem mouseover auf ein <img> im gleichen Moment auch das darunter liegende <p>-Element verändern soll. Und umgekehrt: beim hover über das <p>-Element soll auch gleichzeitig der Border des Images verändert werden.

    Ich habe mittlerweile schon rausgefunden, dass man es super easy mit css lösen kann.
    Nämlich so:

    Code:
    .group:hover img {
    		border: 16px solid #FC9501; 
    		border-radius: 104px;
    	}
    	.group:hover p {
    		color: #FC9501;
    	}
    Jedoch habe folgenden Ansatz, den ich gerne richtig umsetzen würde, um mein Verständnis zu erweitern.

    Ich glaube es liegt daran, dass x und pic globale Variablen sind.
    Nur ich weiß nicht wie ich es anders umsetzen könnte.

    Code:
            var x = 0;
    	var pic = "";
    	for(var i=0;i<=3;i++){
    		x = i.toString();
    		pic = document.getElementById('pic'+x);
    
            pic.addEventListener('mouseenter', function(event) {
            	console.log(event.target.nodeName);
            	console.log(pic.id);
            	enter(pic);
            });
            pic.addEventListener('mouseleave', function(event) {
            	console.log(event.target.nodeName);
            	leave(pic);
            });
        }
    
        function enter(pic) {
        	if(pic == 'pic0') document.getElementById('p0').style.color='#FC9501';
        }
        function leave(pic) {
        	if(pic == 'pic0') document.getElementById('p0').style.color='#FFFFFF';
        }
    HTML-Code:
    <head>
             <style>
                 .group img {
    		   border: 16px solid #F6F5E9; 
    		   border-radius: 104px;
    	        }
                    p {
    		  float: left;
    		  color: #F6F5E9;
    		  font-size: 35px;
    		  font-family: 'Open Sans', Helvetica, sans-serif;
    		  font-weight: 700;
    		  letter-spacing: 0.5px;
    	       }
             </style>
    </head>
    
    <body>
    	<div id="content">
    
    		<div class="group">
    			<img id="pic0" src="" >
    			<p id="p0">1950</p>
    		</div>
    
    		<div class="group">
    			<img id="pic1" src="" >
    			<p id="p1">1<span style="letter-spacing: 1px;">9</span>60</p>
    		</div>
    
    		<div class="group">
    			<img id="pic2" src="" >
    			<p id="p2">1970</p>
    		</div>
    
    		<div class="group">
    			<img id="pic3" src="" >
    			<p id="p3">1980</p>
    		</div>
    	</div>
    <body>
    Geändert von mikdoe (25-08-2015 um 14:18 Uhr) Grund: Code Tags

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: Globale Variable in lokale ändern?

    Zitat Zitat von ea sy Beitrag anzeigen
    Ich glaube es liegt daran, dass x und pic globale Variablen sind.
    Nicht nur. Du hast auch noch das Problem, dass sie in den Funktionen, die du als Eventlistener registrierst, auch nicht als Wert, sondern wirklich als Variable referenziert werden:
    Code:
    for (var i = 0; i < 3; i += 1){
    	window.setTimeout(function(){
    		alert(i)
    	}, i * 1000);
    }
    Außerdem ist pic in den Funktionen enter und leave (übrigens keine besonders guten Namen für Funktionen) als String behandelt. Du übergibst aber eine Node.

    Ich löse solche Probleme am liebsten mit ARRAY.forEach():
    Code:
    function collectionForEach(col, func){
    	Array.prototype.slice.call(col).forEach(func);
    }
    collectionForEach(document.getElementsByClassName("group"), function(group){
    	group.addEventListener("mouseenter", function(){
    		collectionForEach(group.getElementsByTagName("img"), function(img){
    			img.style.border = "16px solid #FC9501";
    			img.style.borderRadius = "104px";
    		});
    		collectionForEach(group.getElementsByTagName("p"), function(p){
    			p.style.color= "#FC9501";
    		});
    	}, false);
    	group.addEventListener("mouseleaver", function(){
    		collectionForEach(group.getElementsByTagName("img"), function(img){
    			img.style.border = "";
    			img.style.borderRadius = "";
    		});
    		collectionForEach(group.getElementsByTagName("p"), function(p){
    			p.style.color= "#";
    		});
    	}, false);
    });

Ähnliche Themen

  1. lokale und globale variablen
    Von aräs im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 23-12-2011, 18:12
  2. globale Variablen durch lokale Variable ändern
    Von Kalito im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 01-06-2011, 00:13
  3. globale variable mit onClick ändern
    Von scorpio86 im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 14-05-2011, 20:26
  4. Globale Variable per Parameter ändern
    Von mondfinsternis im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 25-04-2011, 18:21
  5. Lokale Variable an eine neue Seite übergeben
    Von Relikt im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 02-11-2006, 14:23

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •