Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.02.2018, 20:58
Аспирант
Отправить личное сообщение для stem Посмотреть профиль Найти все сообщения от stem
 
Регистрация: 09.03.2013
Сообщений: 36

Одинаковые элементы
Добрый день.

Help Sos Mayday

Есть простой скрипт PinchZoom, но срабатывает только на первый элемент.
Знаю, что id должен быть уникальным, не смотрите на это, я просто оставил, как есть.

А на getElementsByClassNames не реагирует почему то, перестает работать. Я так понимаю, что надо цикл сделать, чтобы работало, но не знаю как это на JS делается.

В коде так и будет несколько одинаковых элементов. Как исправить скрипт, чтобы обрабатывался только тот элемент на котором происходит touch событие, чтобы на всех элементах работало?



<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Pinch Zoomer - http://anitasv.github.io/zoom/</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body style="min-width:320px;">


<div width=320 height=240 style="overflow:hidden;">
    <!-- this doesn't have to be an image -->
    <img id="torotate" class="torotate" width=320 height=240 src="https://lh3.googleusercontent.com/w33i78Rt0j4GHr7SA1luYtBAtmC1DmRHwobUcK1wCKivA_u4VczsDw0CweLmJpUwFRUs=w1920-h1200-no">
    <img id="torotate" class="torotate" width=320 height=240 src="https://lh3.googleusercontent.com/w33i78Rt0j4GHr7SA1luYtBAtmC1DmRHwobUcK1wCKivA_u4VczsDw0CweLmJpUwFRUs=w1920-h1200-no">
</div>

<script type="text/javascript" src="http://anitasv.github.io/zoom/zoom-1.0.7.min.js"> </script>
<script type="text/javascript">
var elem = document.getElementById('torotate');
var zm = new Zoom(elem, {
    rotate: false
});
</script>
</body>
</html>

Последний раз редактировалось stem, 05.02.2018 в 21:03.
Ответить с цитированием
  #2 (permalink)  
Старый 05.02.2018, 21:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

stem,
[].forEach.call( document.querySelectorAll('.torotate'), function(elem) {
new Zoom(elem, {
    rotate: false
});
});
Ответить с цитированием
  #3 (permalink)  
Старый 05.02.2018, 21:25
Аспирант
Отправить личное сообщение для stem Посмотреть профиль Найти все сообщения от stem
 
Регистрация: 09.03.2013
Сообщений: 36

Сообщение от рони Посмотреть сообщение
stem,
[].forEach.call( document.querySelectorAll('.torotate'), function(elem) {
new Zoom(elem, {
    rotate: false
});
});
Спасибо, работает на класс, но только передвигаются сразу все изображения, а так каждое по отдельности должно двигаться.

Т.е. там грубо говоря галерея-карусель из неизвестного кол-ва элементов и каждое изображение зумится двумя пальцами.


еще вот так сделал, но тоже все разом двигаются((

var elem = document.getElementsByClassName("torotate");
for(var i = 0; i < elem.length; i++) {
//some code
console.log(elem[i])
var zm = new Zoom(elem[i], {
	rotate: false
});
}


Дополнение: ошибся с html-кодом, надо было каждое изображение обернуть в свой div. тогда по одному двигаются, работает как надо)

Последний раз редактировалось stem, 06.02.2018 в 22:13.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Исключить из переменной elems все элементы которые имеют родственные элементы с класс Fenix-77 Общие вопросы Javascript 2 12.04.2016 16:20
Как вернуть div и все вложенные в него элементы в первоначальное состояние? lucky89 Общие вопросы Javascript 17 26.02.2015 18:41
Подскажите как сравнить первые элементы многомерного массива? yloboda Элементы интерфейса 3 08.06.2014 15:00
почти одинаковые элементы массива mcavalon Общие вопросы Javascript 3 24.01.2013 11:04
Выбрать элементы, в которые вложен элемент с id. Вадимчег jQuery 3 24.11.2012 10:38