Loading...
qvor.vasilev avatar 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, но не се сещам по какъв друг начин да ги достъпя)? Има ли по лесен начин?

0
JavaScript Fundamentals
ttitto avatar 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

1
11/09/2014 18:23:56
qvor.vasilev avatar qvor.vasilev 23 Точки

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

0
ttitto avatar ttitto 1153 Точки

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

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

zoomed[0].ClassName='';

0
qvor.vasilev avatar qvor.vasilev 23 Точки

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

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.