Всем привет!
Проходя курс по js столкнулся с таким заданием: через js под каждым изображением на странице сайта необходимо создать кнопку, которая бы по клику срывала то изображение, под которым она находится.
Прилепить кнопку под изображение у меня получилось, но беда в том, что на какую бы кнопку я не нажимал, исчезают все изображения и до меня никак не дойдет, каким образом должен я связать каждое изображение со своей кнопкой. Менять что либо в самом HTML коде нельзя, только через JS, использование jQuery тоже запрещено.
Помогите пожалуйста.Уже неделю сижу с этим заданием.((
P.S курс на нидерландском языке, так что пусть вас не смущает тарабарщина в HTML коде)
JS:
window=onload = function() {
//-----BUTTON
var nDD = document.getElementsByClassName('toggle');
var y = nDD.length;
for(var i = 0; i <= y; i++){
var eItem = document.createElement("BUTTON");
eItem.className = "button";
var sTekst = document.createTextNode('скрыть');
eItem.appendChild(sTekst);
nDD[i].appendChild(eItem);
//-----прячем IMG
eItem.onclick = function() {
var x = document.getElementsByClassName('screenshot');
for (var i = 0; i < x.length; i++){
if (x[i].style.display === "none") {
x[i].style.display = "block";
} else {
x[i].style.display = "none";
}
}
}
}
}
HTML:
<dl>
<dt>Site – Manage Sites - New:</dt>
<dd>de Wizard Site definition verschijnt, je beantwoordt een aantal vragen
<div class="toggle"><img class="screenshot" width="238" height="222" src="images/clip_image014.gif" alt="schermafdruk"></div>
</dd>
<dt> “Hoe wil u de website noemen?” </dt>
<dd>vul in <i> George’s site</i>
<div class="toggle"><img class="screenshot" width="310" height="307" src="images/clip_image002.gif" alt="schermafdruk"> </div>
</dd>
<dt> “Wil u Server technologie gebruiken?”</dt>
<dd> Neen, ga verder
<div class="toggle"><img class="screenshot" width="407" height="175" src="images/clip_image004.gif" alt="schermafdruk"> </div>
</dd>
<dt> “Hoe wil u tewerk gaan met de bestanden?” </dt>
<dd>kies voor <i>Ik wil de bestanden lokaal bewerken en dan uploaden naar de server (aangeraden)</i> </dd>
<dt>”Waar wil u de bestanden lokaal opslaan?</dt>
<dd>Op <i>C:\My Documents\George\George’s site </i>(wordt automatisch ingevuld)
<div class="toggle"><img class="screenshot" width="487" height="294" src="images/clip_image006.gif" alt="schermafdruk"> </div>
</dd>
<dt> “Hoe wil u de bestanden kopiëren naar de Remote Server?”</dt>
<dd>kies voor <i>Local/Network</i></dd>
<dt>”In welke map op die server wil u de bestanden kopiëren?”</dt>
<dd>Op <i>\\Server2\cursisten\Daikin\George\</i>
<div class="toggle"><img class="screenshot" width="494" height="246" src="images/clip_image008.gif" alt="schermafdruk"> </div>
</dd>
<dt> “Wilt u ‘check in‘ en ‘check out’ activeren?” </dt>
<dd><i>Neen</i>, ga verder
<div class="toggle"><img class="screenshot" width="407" height="175" src="images/clip_image010.gif" alt="schermafdruk"> </div>
</dd>
<dt> U bent klaar: de opsomming van al deze instellingen verschijnt</dt>
<dd>klik <i>Done</i> als u klaar bent
<div class="toggle"><img class="screenshot" width="422" height="418" src="images/clip_image012.gif" alt="schermafdruk"> </div>
</dd>
<dt> U ziet de lijst van websites die je reeds maakte, </dt>
<dd>klik opnieuw <i>Done</i>
<div class="toggle"><img class="screenshot" width="238" height="222" src="images/clip_image014.gif" alt="schermafdruk"> </div>
</dd>
<dt>Eenmaal een site gemaakt, heb je een overzicht van alle bestanden ervan in het<i> Files Panel</i> </dt>
<dd>De figuur hieronder toont de toestand van een afgewerkte site.
<div class="toggle"><img class="screenshot" width="216" height="313" src="images/clip_image016.gif" alt="schermafdruk"> </div>
</dd>
</dl>
