Globale Variable in lokale ändern?

ea sy · 25. Aug. 2015

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:

<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>

kkapsner · 26. Aug. 2015

ea sy schrieb:
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);
});

Globale Variable in lokale ändern?

ea sy

New member

kkapsner

Super Moderator