Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.05.2020, 19:24
Аспирант
Отправить личное сообщение для Vahan60 Посмотреть профиль Найти все сообщения от Vahan60
 
Регистрация: 20.04.2020
Сообщений: 46

Два клика по кнопке
Доброго времени суток.
Такая проблема - хочу, чтобы по клику на кнопку картинки менялись, а по повторному клику все возвращались на свои места.
Первый клик и первый обмен происходят штатно.
А вот повтор не работает.
Почему? Что не так делаю?

const colors = [
        ["colo/colZ1/Path_0.png", "colo/colZ2/Path_0.png"], 
	["colo/colZ1/Path_1.png", "colo/colZ2/Path_1.png"], 
	["colo/colZ1/Path_2.png", "colo/colZ2/Path_2.png"], 
	["colo/colZ1/Path_3.png", "colo/colZ2/Path_3.png"] 
];

// размещаем картинки 1-ой группы по местам при запуске сайта

let img = document.querySelectorAll(".img") 
for (let i = 0; i < colors.length; i++) {
    img[i].src = colors[i][0];
	img.display
    };

// меняем картинки на 2-ую группу на местах по клику на bttn

let bttn = document.querySelector (".bttn");  // меняем картинки на местах 
bttn.addEventListener ("click", function () {
  for (let i = 0; i < colors.length; i++) {
    img[i].src = colors[i][1];
	img.display
    };
});

// а вот обратного действия ( смена картинок 2-ой группы на картинки 1-ой группы по клику по той же bttn) не происходит

bttn.addEventListener ("click", function() {
  for (let i = 0; i < colors.length; i++) {
    img[i].src = colors[i][0];
	img.display
    };
});
Ответить с цитированием
  #2 (permalink)  
Старый 31.05.2020, 19:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Vahan60,
строка 21
img[i].src = colors[i].reverse()[0];


строку 28 убрать
Ответить с цитированием
  #3 (permalink)  
Старый 01.06.2020, 09:39
Аспирант
Отправить личное сообщение для Vahan60 Посмотреть профиль Найти все сообщения от Vahan60
 
Регистрация: 20.04.2020
Сообщений: 46

Работает. Спасибо огромное.
И сразу же два вопроса-уточнения.

1. Можно ли этот же принцип применить, если необходимо будет менять 3 и более групп картинок?

2. Я получил два вида фрагмента кода. Оба работают.
И все же - какой из них правильней/надёжней?

let bttn = document.querySelector (".bttn");

bttn.addEventListener ("click", function () {
  for (let i = 0; i < colors.length; i++) {
    img[i].src = colors[i].reverse()[0];
	img.display
    };
	
});

for (let i = 0; i < colors.length; i++) {
    img[i].src = colors[i][0];
    img.display
    };


let bttn = document.querySelector (".bttn");

bttn.addEventListener ("click", function () {
  for (let i = 0; i < colors.length; i++) {
    img[i].src = colors[i].reverse()[0];
	img.display
    };
	
  for (let i = 0; i < colors.length; i++) {
    img[i].src = colors[i][0];
    img.display
    }
});
Ответить с цитированием
  #4 (permalink)  
Старый 01.06.2020, 10:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Vahan60
img.display
что это?
Сообщение от Vahan60
Можно ли этот же принцип применить, если необходимо будет менять 3 и более групп картинок?
нет, нужен индекс, нужна переменная или атрибут где будет хранится индекс.
Сообщение от Vahan60
Я получил два вида фрагмента кода. Оба работают.
???!!!
Ответить с цитированием
  #5 (permalink)  
Старый 01.06.2020, 10:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Vahan60,
const colors = [
        ["colo/colZ1/Path_0.png", "colo/colZ2/Path_0.png"],
	["colo/colZ1/Path_1.png", "colo/colZ2/Path_1.png"],
	["colo/colZ1/Path_2.png", "colo/colZ2/Path_2.png"],
	["colo/colZ1/Path_3.png", "colo/colZ2/Path_3.png"]
];
const img = document.querySelectorAll(".img");
const bttn = document.querySelector(".bttn");
const len = colors[0].length;
let index = 0;
const changeSrc = index => colors.forEach((arrSrc, k) => img[k].src = arrSrc[index]);

changeSrc(index);

bttn.addEventListener ("click", function () {
index = ++index % len;
changeSrc(index)
});
Ответить с цитированием
  #6 (permalink)  
Старый 01.06.2020, 16:32
Аспирант
Отправить личное сообщение для Vahan60 Посмотреть профиль Найти все сообщения от Vahan60
 
Регистрация: 20.04.2020
Сообщений: 46

Сообщение от рони Посмотреть сообщение
что это?
Как оказалось - лишняя деталь.

Сообщение от рони Посмотреть сообщение
???!!!
Ну я же выше привел оба варианта.
Ответить с цитированием
  #7 (permalink)  
Старый 01.06.2020, 16:36
Аспирант
Отправить личное сообщение для Vahan60 Посмотреть профиль Найти все сообщения от Vahan60
 
Регистрация: 20.04.2020
Сообщений: 46

Сообщение от рони Посмотреть сообщение
нет, нужен индекс, нужна переменная или атрибут где будет хранится индекс.
Я так понимаю, в ответе #5 именно такой код написан?
Ответить с цитированием
  #8 (permalink)  
Старый 01.06.2020, 17:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Vahan60
в ответе #5 именно такой код написан?
да
Ответить с цитированием
  #9 (permalink)  
Старый 01.06.2020, 17:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Vahan60
Ну я же выше привел оба варианта.
второй вариант очень странный масло масляное
Ответить с цитированием
  #10 (permalink)  
Старый 10.06.2020, 12:35
Аспирант
Отправить личное сообщение для Vahan60 Посмотреть профиль Найти все сообщения от Vahan60
 
Регистрация: 20.04.2020
Сообщений: 46

Сообщение от рони Посмотреть сообщение
да
Уфф.
Вроде разобрался.
Спасибо.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Дата последнего клика по кнопке Anastasiia_prof Общие вопросы Javascript 4 04.06.2019 17:29
Срабатывание подгрузки после клика по кнопке CORONER Общие вопросы Javascript 10 06.10.2018 23:02
Клик по кнопке срабатывает со второго раза, на почту приходит два одинаковых письма yatsyk Общие вопросы Javascript 4 13.10.2016 13:28
Клик по кнопке после клика в модальном окне xqq jQuery 5 12.02.2014 21:11
Как при быстром многократном клике по кнопке обрабатывать только первый клик battrack jQuery 3 22.03.2012 10:47