Hoe lang duurt het voo..
ClassName
Ik ben bezig met het maken van een winkelstraat op mijn site, die bestaat uit 1 lange afbeelding met de buitenkant van de winkels, met daarachter allemaal kleine afbeeldingen van het interieur.
Door het klikken op een deur, wordt die deur onzichtbaar, en wordt de z-as van het interieur verhoogt, zodat je in de winkel staat. De z-as van de andere winkels word weer verlaagd, zodat als je al in een winkel was, je die verlaat.
Ik gebruik hier deze code voor:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function EnterShop(shop)
{
var i = 0;
for (i = 0; i <= 13; i++)
{
if (i == 4 || i == 11)
{
document.getElementById(i).style.zIndex = 0;
document.getElementById('person-' + i).style.zIndex = 5;
document.getElementById('door-' + i).style.visibility = 'visible';
}
}
document.getElementById(shop).style.zIndex = 10;
document.getElementById('person-' + shop).style.zIndex = 15;
document.getElementById('door-' + shop).style.visibility = 'hidden';
}
{
var i = 0;
for (i = 0; i <= 13; i++)
{
if (i == 4 || i == 11)
{
document.getElementById(i).style.zIndex = 0;
document.getElementById('person-' + i).style.zIndex = 5;
document.getElementById('door-' + i).style.visibility = 'visible';
}
}
document.getElementById(shop).style.zIndex = 10;
document.getElementById('person-' + shop).style.zIndex = 15;
document.getElementById('door-' + shop).style.visibility = 'hidden';
}
Maar nu moet ik ook de z-as aanpassen van de producten in de winkel.
ik heb dus alle producten van winkel 4, de class 'item-shop-4' gegeven.
En nu wil ik met javascript de Z-as aanpassen:
Code (php)
1
document.getElementsByClassName('item-shop-4').style.zIndex = 15;
Maar als ik dit aan mijn code toevoeg, gebeurd er niks, en als ik het ergens tussen zet, wordt alles daarna niet meer uitgevoerd, wat doe ik verkeerd?
Gewijzigd op 21/08/2011 14:38:27 door Lord Gaga
Je kunt beter jQuery gebruiken, daarmee kan het wel en ook in alle browsers.
Code (php)
1
$('.item-shop' + shop).css('z-index: 15');
(Ik ben niet echt goed in javascript, laat staan JQuery)
Gewijzigd op 21/08/2011 15:03:59 door Lord Gaga
Code (php)
1
2
3
2
3
$('.item-shop' + shop).css('z-index', 15);
of
$('.item-shop' + shop).css({z-index: 15});
of
$('.item-shop' + shop).css({z-index: 15});
Als de class item-shop-4 maar een keer voorkomt, kun je er natuurlijk ook een ID van maken. Dan wordt het zoiets.
Code (php)
1
$('#item-shop' + shop).css('z-index', 15);
En als het er wel meer zijn en het zijn allemaal divs, dan zou ik dat er bijzetten. Dat maakt het namelijk sneller. Dus:
Code (php)
1
$('div.item-shop' + shop).css('z-index', 15);
Ik heb het veranderd naar dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function EnterShop(shop)
{
var i = 0;
for (i = 0; i <= 13; i++)
{
if (i == 4 || i == 11)
{
$('#' + i).css('zIndex', 0);
$('#person-' + i).css('zIndex', 5);
$('div.item-shop-' + i).css('zIndex', 5);
$('#door-' + i).css('visibility', 'visible');
}
}
$('#' + shop).css('zIndex', 10);
$('#person-' + shop).css('zIndex', 15);
$('div.item-shop-' + shop).css('zIndex', 15);
$('#door-' + shop).css('visibility', 'hidden');
}
{
var i = 0;
for (i = 0; i <= 13; i++)
{
if (i == 4 || i == 11)
{
$('#' + i).css('zIndex', 0);
$('#person-' + i).css('zIndex', 5);
$('div.item-shop-' + i).css('zIndex', 5);
$('#door-' + i).css('visibility', 'visible');
}
}
$('#' + shop).css('zIndex', 10);
$('#person-' + shop).css('zIndex', 15);
$('div.item-shop-' + shop).css('zIndex', 15);
$('#door-' + shop).css('visibility', 'hidden');
}
En zoals het er nu naar uitziet werkt het perfect!