Первый раз постер.Я пытаюсь получить простую, если возможно, единственную функцию в HTML & JS, чтобы изменить размер изображения, а затем уменьшить его до исходного размера между различными изображениями на одной странице.Итак:
- Если изображение не увеличено, увеличьте изображение, на которое нажали.
- Если изображение увеличено, если это тот же элемент, по которому щелкают, вернуться к исходному размеру
- Если изображение увеличено, это не элемент, по которому щелкают, выяснить, какое изображениеувеличено, уменьшено до исходного размера и увеличено до щелчка элемента
Всего 8 изображений.Я создал массив, чтобы изменить значение от 1 до 0, чтобы, возможно, использовать счетчик, чтобы найти, какое число в массиве не было 0, а затем изменить его размер, но я не знаю, как получить эти данные или изменить данные для представления которыхЧтобы увеличить это конкретное значение в массиве, щелкнули изображение, например, если щелкнуть по [5], значение [5] станет 1, а затем java-функция циклически переместится и определит 6-е изображение, а также увеличит его.
var imgEnlarged = 0;
var otherEnlargedImgs = [0, 0, 0, 0, 0, 0, 0, 0,];
function imgEnlarge(){
if (imgEnlarged==0){ //Basic function if no enlarged, enlarge click element
document.getElementById("0").style.width = "400px";
document.get
imgEnlarged = 1;
otherEnlargedImgs[getElementById("0")] = 1
}
else if (imgEnlarged==1) { //If an image is enlarged, is it this one? If so, resize image
document.getElementById("0").style.width = "300px";
imgEnlarged = 0;
otherEnlargedImgs[0] = 0
}
else if (imgEnlarged==1 && imgEnlargedOther==1) { //if enlarged, which? Close other, open current element
document.getElementById("0").style.width = "300px";
imgEnlarged = 1
otherEnlargedImgs[0] = 1
}
}
function imgAssign() {
}
<div class="wrapper">
<div class="grdsngrid">
<div class=grdsnbox><img id="0" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img0.jpg"><figcaption></figcaption></div>
<div class=grdsnbox><img id="1" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img1.jpg"><figcaption></figcaption></div>
<div class=grdsnbox><img id="2" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img2.jpg"><figcaption></figcaption></div>
<div class=grdsnbox><img id="3" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img3.jpg"><figcaption></figcaption></div>
<div class=grdsnbox><img id="4" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img4.jpg"><figcaption></figcaption></div>
<div class=grdsnbox><img id="5" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img5.jpg"><figcaption></figcaption></div>
<div class=grdsnbox><img id="6" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img6.jpg"><figcaption></figcaption></div>
<div class=grdsnbox><img id="7" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img7.jpg"><figcaption></figcaption></div>
</div>
</div>
В настоящее время это работает только (и код немного грязный, извините, я очень плохо знаком с кодированием) с первым изображением или любым другим изображениемщелкнул, если создавал разные функции для каждого изображения.Есть ли способ сделать это, который не требует, чтобы каждое изображение получало свою собственную функцию.
Функция imageAssign заключалась в том, чтобы назначать номер позиции в массиве конкретного изображения, по которому щелкнули, но опять же, это требовалось с помощьюнесколько функций.
var imgEnlarged предназначен для проверки того, было ли увеличено изображение, а не конкретно, какое изображение было увеличено.
Заранее благодарим за любую помощь или совет.