-
Notifications
You must be signed in to change notification settings - Fork 0
/
change.js
52 lines (42 loc) · 1.35 KB
/
change.js
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var alliPhonesImg = ['iPhone7_black', 'iPhone7_gold', 'iPhone7_jetblack', 'iPhone7_rosegold', 'iPhone7_silver'];
var imgPro = document.querySelector('.imgPro img');
var allColors = document.querySelectorAll('.allColors li');
allColors.forEach(colors => colors.addEventListener('click', function (elem)
{
for (var i = 0; i < allColors.length; i++)
{
allColors[i].classList.remove('active');
}
if(this.className === 'black')
{
imgPro.src = 'images/'+alliPhonesImg[0]+'.png';
imgPro.classList.add('animate');
}
if(this.className === 'gold')
{
imgPro.src = 'images/'+alliPhonesImg[1]+'.png';
imgPro.classList.add('animate');
}
if(this.className === 'jetblack')
{
imgPro.src = 'images/'+alliPhonesImg[2]+'.png';
imgPro.classList.add('animate');
}
if(this.className === 'rosegold')
{
imgPro.src = 'images/'+alliPhonesImg[3]+'.png';
imgPro.classList.add('animate');
}
if(this.className === 'silver')
{
imgPro.src = 'images/'+alliPhonesImg[4]+'.png';
imgPro.classList.add('animate');
}
// when clicks a color the color is changed
// 26:09 Has to check what the page looks like
this.classList.add('active');
setTimeout(function()
{
imgPro.classList.remove('animate');
}, 500);
}))