[Java Script] - getElementBy....What exactly? - Софтуерен университет

qvor.vasilev 23 Точки

[Java Script] - getElementBy....What exactly?

Колеги имам нужда от малко помощ с личен проект. Опитвам се да си направя галерия, в която като кликна на снимка, тя да се увеличава и съответно намалява при втори клик. До тук добре - измислих функцията и тя работи коректно, но тук дойде друг проблем: Как да достъпя само една от картинкит а не всичките? В момента като кликна на картинка - всички се увеличават и намаляват едновременно, а аз искам само тази на която съм кликнал.

Примерен html:

<div class="indoors">
<div>
<a href="#"><img src="images/1.jpg" id="zoomer" onclick="zoomIt"> </a>
<p>каталожен номер</p>
</div>
<div>
<a href="#"><img src="images/2.jpg" id="zoomer" onclick="zoomIt()"> </a>
<p>каталожен номер</p>
</div>
</div

JavaScript функция:

function zoomIt(){
var image = document.getElementById('zoomer');
if (image.hasAttribute('class', 'expanded')) {
image.removeAttribute('class', 'expanded');

}else {
image.setAttribute('class', 'expanded');
}

}

Някакви идеи? Къде бъркам (освен, че всички имат едно и също id, но не се сещам по какъв друг начин да ги достъпя)? Има ли по лесен начин?

Тагове:

11/09/2014 18:03:49 JavaScript Fundamentals

Виж всички отговори

ttitto 1153 Точки

Подай на функцията event, хвани таргета на ивента, сравни му id-to дали е zoomer и го прави каквото си искаш.Нещо от сорта:

function zoomIt(event){
if(event==null){
event = window.event;
}
var image=event.target || event.srcElement.

if(image.id=='zoomer'){
if (image.hasAttribute('class', 'expanded')) {
image.removeAttribute('class', 'expanded');
}else {
image.setAttribute('class', 'expanded');
}
}
}

EDIT: Ето още един вариант: подаваш this като аргумент на функцията, където казваш да се изпълнява при клик: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_color2

11/09/2014 18:17:36 11/09/2014 18:23:56

qvor.vasilev 23 Точки

Супер - работи така :) А имаш ли идея как да го направя така, че като кликна върху една картинка друга(кояето е зуумната) да става отново малка? Моята идея е да ги набутам всички картинки в един масив и да им ресетвам class="expanded" . В правилна посока ли съм? Че прерових дост от инетернета днес и не успях да намеря орговор на това, което искам да напрвя, или по-скоро не знам как точно да си задам въпроса/идеята.

11/09/2014 18:27:14

ttitto 1153 Точки

Ако разбирам искаш всичките, които имат клас expanded да станат нормални, когато кликнеш някоя друга. Това може много лесно да стане като избереш зумнатите (тя нали ще е само една единствена) с

var zoomed=document.getElementbyClassName('expanded');

zoomed[0].ClassName='';

11/09/2014 18:34:44

qvor.vasilev 23 Точки

Това не сработва както ми се иска или аз не правя нещо като хората. Общо взето няма никаква промяна

11/09/2014 19:43:49

ttitto 1153 Точки

Писах го директно във полето за коментари във форума и е възможно да има грешка. Виждам, че съм пропуснал едно s:

document.getElementsByClassName('expanded');
 
Така получаваш масив от всички картинки, които са еxpanded. Понеже имаш само една expanded я достъпваш с zoomed[0]. Сега остава да и премахнеш класа 'expanded', което става или както написах преди това или чрез classList: 

zoomed[0].classList.remove('expanded');


Ако не става така качи линк с кода да мога да тествам

11/09/2014 20:09:16 11/09/2014 20:14:00

Виж всички отговори