Javascript-форум - Скрипт смены картинок при нажатии. Добавить смену в обратном порядке при нажатойSHIFT

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Скрипт смены картинок при нажатии. Добавить смену в обратном порядке при нажатойSHIFT (https://javascript.ru/forum/misc/84189-skript-smeny-kartinok-pri-nazhatii-dobavit-smenu-v-obratnom-poryadke-pri-nazhatojjshift.html)

Цитата:

Сообщение от Nexus

считаете, что ТС оно может быть вовсе не нужно?

вангую что нужна линейка блоков)))

Цитата:

Сообщение от Nexus

рони, 54-я строка - крутое решение, я до такого не додумался)

я тоже,
решение подсмотрено у https://javascript.ru/forum/members/4857-malleys/

тут https://javascript.ru/forum/misc/762...tml#post501108

строка 42

Большое спасибо, оба варианта работают идеально. Вопрос решён.

Цитата:

Сообщение от рони (Сообщение 546412)

вангую что нужна линейка блоков)))

Подскажите, как сделать несколько строчек блоков? В старом скрипте я задавал координаты каждого блока отдельно и мог устанавливать блоки в нужное место страницы.

<div class="square"id="square95" style = "left:1425px; top:0px;" onclick = "ChangeSign(95);"></div>
 <div class="square"id="square96" style = "left:1440px; top:0px;" onclick = "ChangeSign(96);"></div>
 <div class="square"id="square97" style = "left:1455px; top:0px;" onclick = "ChangeSign(97);"></div>
 <div class="square"id="square98" style = "left:1470px; top:0px;" onclick = "ChangeSign(98);"></div>
 <div class="square"id="square99" style = "left:1485px; top:0px;" onclick = "ChangeSign(99);"></div>


 <div class="square"id="square100" style = "left:0px; top:32px;" onclick = "ChangeSign(100);"></div>
 <div class="square"id="square101" style = "left:15px; top:32px;" onclick = "ChangeSign(101);"></div>
 <div class="square"id="square102" style = "left:30px; top:32px;" onclick = "ChangeSign(102);"></div>
 <div class="square"id="square103" style = "left:45px; top:32px;" onclick = "ChangeSign(103);"></div>

Теперь так не получится?

sober,
рисуйте сами html, data-index="0" только укажите и onclick не нужно

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        #XO {
            background-color: #A5DEFF;
            display: flex;
        }
        div.square {
            height: 100px;
            width: 100px;
            cursor: pointer;
        }
        div.square img {
            height: 100px;
            width: 100px;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let src = ["https://via.placeholder.com/150/0000FF/FFFFFF/?text=+empty",  //заменить на свои ссылки 'empty.png' и т.д.
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+circle",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+cross",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+dus",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+puat",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+chest",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+seem",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+voosem",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+deeviat",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+des",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+odincat"
            ];
            let len = src.length;

            let up = 1;
            document.addEventListener("keydown", function(e) {
                if (e.shiftKey) up = -1;
            })
            document.addEventListener("keyup", function(e) {
                up = 1;
            })
            document.addEventListener("click", function({
                target
            }) {
                if (target = target.closest(".square")) {
                    let index = +target.dataset.index;
                    index = (index + len + up) % len;
                    target.dataset.index = index;
                    target.querySelector("img").src = src[index];
                };
            })
        })
    </script>
</head>
<body>
    <div class="square" data-index="0"><img src = 'empty.png'></div>
    <div class="square" data-index="0"><img src = 'empty.png'></div>
</body>
</html>

Цитата:

Сообщение от рони (Сообщение 546420)

sober,
рисуйте сами html, data-index="0" только укажите и onclick не нужно

Получилось так как хотел.
в стили добавил position:absolute;

div.square {
            position:absolute; 
            height: 32px;
            width: 15px;
            cursor: pointer;

сам код с координатами:

<body>
   <div class="square" style = "left:10px; top:100px;" data-index="0"><img src = 'empty.png'></div>
   <div class="square" style = "left:50px; top:100px;" data-index="0"><img src = 'empty.png'></div>
   <div class="square" style = "left:175px; top:100px;" data-index="0"><img src = 'empty.png'></div>
   <div class="square" style = "left:25px; top:200px;" data-index="0"><img src = 'empty.png'></div>
</body>

Еще раз спасибо за уделенное время!