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)

sober 30.06.2022 21:50
Скрипт смены картинок при нажатии. Добавить смену в обратном порядке при нажатойSHIFT
 
Подскажите есть такой скрипт


<script>
var squares = [];
var squares_signs = []
function Initialization(){
for (var i = 0; i < 38001; i++){
squares[i] = document.getElementById("square"+i);
}
for (var i = 0; i < 38001; i++){
squares[i].innerHTML = "<img src = 'empty.png'>";
squares_signs[i] = 0;
}
}
function ChangeSign(square_i){
squares[square_i].innerHTML = "<img src = 'circle.png'>";

if (squares_signs[square_i] == 0){
squares[square_i].innerHTML = "<img src = 'circle.png'>";
squares_signs[square_i] = 1;
return;
}
if (squares_signs[square_i] == 1){
squares[square_i].innerHTML = "<img src = 'cross.png'>";
squares_signs[square_i] = 2;
return;
}
if (squares_signs[square_i] == 2){
squares[square_i].innerHTML = "<img src = 'dus.png'>";
squares_signs[square_i] = 3;
return;
}
if (squares_signs[square_i] == 3){
squares[square_i].innerHTML = "<img src = 'puat.png'>";
squares_signs[square_i] = 4;
return;
}
if (squares_signs[square_i] == 4){
squares[square_i].innerHTML = "<img src = 'chest.png'>";
squares_signs[square_i] = 5;
return;
}
if (squares_signs[square_i] == 5){
squares[square_i].innerHTML = "<img src = 'seem.png'>";
squares_signs[square_i] = 6;
return;
}
if (squares_signs[square_i] == 6){
squares[square_i].innerHTML = "<img src = 'voosem.png'>";
squares_signs[square_i] = 7;
return;
}
if (squares_signs[square_i] == 7){
squares[square_i].innerHTML = "<img src = 'deeviat.png'>";
squares_signs[square_i] = 8;
return;
}
if (squares_signs[square_i] == 8){
squares[square_i].innerHTML = "<img src = 'des.png'>";
squares_signs[square_i] = 9;
return;
}
if (squares_signs[square_i] == 9){
squares[square_i].innerHTML = "<img src = 'odincat.png'>";
squares_signs[square_i] = 10;
return;
}
if (squares_signs[square_i] == 10){
squares[square_i].innerHTML = "<img src = 'empty.png'>";
squares_signs[square_i] = 0;
}
}
</script>


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

Логика такая:
если клавиша шифт не нажата первая переключается на вторую ->3 ->4->5 и так далее до десятой.

если клавиша шифт нажата, то первая переключается на 10 ->9 ->8 ->7 и так далее до первой.

Я вообще не программист, только разбираюсь со всем этим, не принципиально, чтоб была именно клавиша шифт, подойдет любая клавиша на клавиатуре.

рони 30.06.2022 22:01
Цитата:
Сообщение от sober
38001
что это за магическая цифра?

sober 30.06.2022 22:07
Цитата:
Сообщение от рони (Сообщение 546402)
что это за магическая цифра?
Я не знаю, так было. Этот скрипт я скачал 5 лет назад и приспособил для своих задач. Теперь вопрос появился, получится его модернизировать?

рони 30.06.2022 22:21
sober,
надеюсь вам кто-то поможет ...

Nexus 30.06.2022 22:41
sober, это же не полный скрипт?
Где и как вызывается функция ChangeSign?

Давно такого Индусского кода не видел =)

sober 30.06.2022 23:01
Цитата:
Сообщение от Nexus (Сообщение 546405)
sober, это же не полный скрипт?
Где и как вызывается функция ChangeSign?

Давно такого Индусского кода не видел =)
Вот только не смейтесь

Полностью страница выглядит так:
<body>

 <td class="centerColumn">
 <div id="textBlock">
 <!-- <body> -->
[css]
<style>
 h1{
 color:black;
 font-family: Palatino Linotype;
 }
 div{
 font-family: Palatino Linotype;
 }
 #XO{
 background-color:#A5DEFF;
 position:relative;
 width: 400px;
 }
 div.square{
 position:absolute;
 height:20px;
 width:20px;
 cursor:pointer;
 }
</style>
[css]
[js]
<script>
 var squares = [];
 var squares_signs = []
 function Initialization(){
 for (var i = 0; i < 38001; i++){
 squares[i] = document.getElementById("square"+i);
 }
 for (var i = 0; i < 38001; i++){
 squares[i].innerHTML = "<img src = 'empty.png'>";
 squares_signs[i] = 0;
 }
 }
 function ChangeSign(square_i){
 squares[square_i].innerHTML = "<img src = 'circle.png'>";

 if (squares_signs[square_i] == 0){
 squares[square_i].innerHTML = "<img src = 'circle.png'>";
 squares_signs[square_i] = 1;
 return;
 }
 if (squares_signs[square_i] == 1){
 squares[square_i].innerHTML = "<img src = 'cross.png'>";
 squares_signs[square_i] = 2;
 return;
 }
 if (squares_signs[square_i] == 2){
 squares[square_i].innerHTML = "<img src = 'dus.png'>";
 squares_signs[square_i] = 3;
 return;
 }
 if (squares_signs[square_i] == 3){
 squares[square_i].innerHTML = "<img src = 'puat.png'>";
 squares_signs[square_i] = 4;
 return;
 }
 if (squares_signs[square_i] == 4){
 squares[square_i].innerHTML = "<img src = 'chest.png'>";
 squares_signs[square_i] = 5;
 return;
 }
 if (squares_signs[square_i] == 5){
 squares[square_i].innerHTML = "<img src = 'seem.png'>";
 squares_signs[square_i] = 6;
 return;
 }
 if (squares_signs[square_i] == 6){
 squares[square_i].innerHTML = "<img src = 'voosem.png'>";
 squares_signs[square_i] = 7;
 return;
 }
 if (squares_signs[square_i] == 7){
 squares[square_i].innerHTML = "<img src = 'deeviat.png'>";
 squares_signs[square_i] = 8;
 return;
 }
 if (squares_signs[square_i] == 8){
 squares[square_i].innerHTML = "<img src = 'des.png'>";
 squares_signs[square_i] = 9;
 return;
 }
 if (squares_signs[square_i] == 9){
 squares[square_i].innerHTML = "<img src = 'odincat.png'>";
 squares_signs[square_i] = 10;
 return;
 }
 if (squares_signs[square_i] == 10){
 squares[square_i].innerHTML = "<img src = 'empty.png'>";
 squares_signs[square_i] = 0;
 }
 }
</script>
[/js]

<div id = "XO">
 
 <div class="square"id="square0" style = "left:0px; top:0px;" onclick = "ChangeSign(0);"></div>
 <div class="square"id="square1" style = "left:15px; top:0px;" onclick = "ChangeSign(1);"></div>
 <div class="square"id="square2" style = "left:30px; top:0px;" onclick = "ChangeSign(2);"></div>
 <div class="square"id="square3" style = "left:45px; top:0px;" onclick = "ChangeSign(3);"></div>
 <div class="square"id="square4" style = "left:60px; top:0px;" onclick = "ChangeSign(4);"></div>
 <div class="square"id="square5" style = "left:75px; top:0px;" onclick = "ChangeSign(5);"></div>
 <div class="square"id="square6" style = "left:90px; top:0px;" onclick = "ChangeSign(6);"></div>
 <div class="square"id="square7" style = "left:105px; top:0px;" onclick = "ChangeSign(7);"></div>
 <div class="square"id="square8" style = "left:120px; top:0px;" onclick = "ChangeSign(8);"></div>
 <div class="square"id="square9" style = "left:135px; top:0px;" onclick = "ChangeSign(9);"></div>
 <div class="square"id="square10" style = "left:150px; top:0px;" onclick = "ChangeSign(10);"></div>
 <div class="square"id="square11" style = "left:165px; top:0px;" onclick = "ChangeSign(11);"></div>
 <div class="square"id="square12" style = "left:180px; top:0px;" onclick = "ChangeSign(12);"></div>
 <div class="square"id="square13" style = "left:195px; top:0px;" onclick = "ChangeSign(13);"></div>
 <div class="square"id="square14" style = "left:210px; top:0px;" onclick = "ChangeSign(14);"></div>
 <div class="square"id="square15" style = "left:225px; top:0px;" onclick = "ChangeSign(15);"></div>
 <div class="square"id="square16" style = "left:240px; top:0px;" onclick = "ChangeSign(16);"></div>
 <div class="square"id="square17" style = "left:255px; top:0px;" onclick = "ChangeSign(17);"></div>
 <div class="square"id="square18" style = "left:270px; top:0px;" onclick = "ChangeSign(18);"></div>
 <div class="square"id="square19" style = "left:285px; top:0px;" onclick = "ChangeSign(19);"></div>
 <div class="square"id="square20" style = "left:300px; top:0px;" onclick = "ChangeSign(20);"></div>
 <div class="square"id="square21" style = "left:315px; top:0px;" onclick = "ChangeSign(21);"></div>
 <div class="square"id="square22" style = "left:330px; top:0px;" onclick = "ChangeSign(22);"></div>
 <div class="square"id="square23" style = "left:345px; top:0px;" onclick = "ChangeSign(23);"></div>
 <div class="square"id="square24" style = "left:360px; top:0px;" onclick = "ChangeSign(24);"></div>
 <div class="square"id="square25" style = "left:375px; top:0px;" onclick = "ChangeSign(25);"></div>
 <div class="square"id="square26" style = "left:390px; top:0px;" onclick = "ChangeSign(26);"></div>
 <div class="square"id="square27" style = "left:405px; top:0px;" onclick = "ChangeSign(27);"></div>
 <div class="square"id="square28" style = "left:420px; top:0px;" onclick = "ChangeSign(28);"></div>
 <div class="square"id="square29" style = "left:435px; top:0px;" onclick = "ChangeSign(29);"></div>
 <div class="square"id="square30" style = "left:450px; top:0px;" onclick = "ChangeSign(30);"></div>
 <div class="square"id="square31" style = "left:465px; top:0px;" onclick = "ChangeSign(31);"></div>
 <div class="square"id="square32" style = "left:480px; top:0px;" onclick = "ChangeSign(32);"></div>
 <div class="square"id="square33" style = "left:495px; top:0px;" onclick = "ChangeSign(33);"></div>
 <div class="square"id="square34" style = "left:510px; top:0px;" onclick = "ChangeSign(34);"></div>
 <div class="square"id="square35" style = "left:525px; top:0px;" onclick = "ChangeSign(35);"></div>
 <div class="square"id="square36" style = "left:540px; top:0px;" onclick = "ChangeSign(36);"></div>
 <div class="square"id="square37" style = "left:555px; top:0px;" onclick = "ChangeSign(37);"></div>
 <div class="square"id="square38" style = "left:570px; top:0px;" onclick = "ChangeSign(38);"></div>
 <div class="square"id="square39" style = "left:585px; top:0px;" onclick = "ChangeSign(39);"></div>
 <div class="square"id="square40" style = "left:600px; top:0px;" onclick = "ChangeSign(40);"></div>
 <div class="square"id="square41" style = "left:615px; top:0px;" onclick = "ChangeSign(41);"></div>
 <div class="square"id="square42" style = "left:630px; top:0px;" onclick = "ChangeSign(42);"></div>
 <div class="square"id="square43" style = "left:645px; top:0px;" onclick = "ChangeSign(43);"></div>
 <div class="square"id="square44" style = "left:660px; top:0px;" onclick = "ChangeSign(44);"></div>
 <div class="square"id="square45" style = "left:675px; top:0px;" onclick = "ChangeSign(45);"></div>
 <div class="square"id="square46" style = "left:690px; top:0px;" onclick = "ChangeSign(46);"></div>
 <div class="square"id="square47" style = "left:705px; top:0px;" onclick = "ChangeSign(47);"></div>
 <div class="square"id="square48" style = "left:720px; top:0px;" onclick = "ChangeSign(48);"></div>
 <div class="square"id="square49" style = "left:735px; top:0px;" onclick = "ChangeSign(49);"></div>
 <div class="square"id="square50" style = "left:750px; top:0px;" onclick = "ChangeSign(50);"></div>

</div>

<script>
 Initialization();
</script><!-- </body> -->
 </div>
 </td>

</body>

рони 30.06.2022 23:38
sober,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Nexus 01.07.2022 01:03
Цитата:
Сообщение от sober
Вот только не смейтесь
На самом деле ничего смешного то тут и нет.

У вас в разметке (в HTML) ошибка есть: тэг td находится внутри тэга body, а должен быть непосредственно (должен быть прямым потомком) в тэге tr, который в свою очередь должен быть прямым потомком тэга table.

Я переделал ваш скрипт, результат можно посмотреть тут: https://codesandbox.io/s/sharp-brown...=/src/index.js

Или тут:
<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
    <meta charset="UTF-8" />

    <style>
      h1 {
        color: black;
        font-family: Palatino Linotype;
      }
      div {
        font-family: Palatino Linotype;
      }
      #XO {
        background-color: #a5deff;
        position: relative;
        width: 400px;
      }
      div.square {
        position: absolute;
        height: 20px;
        width: 20px;
        cursor: pointer;
      }
    </style>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const SQARES_NUMBER = 51;
        const HORISONTAL_STEP_PX = 15;
        const VERTICAL_STEP_PX = 0;

        const DECREASE_KEY = "Shift";

        const DEFAULT_SQUARE_IMAGE = "https://fakeimg.pl/20x20/?text=0&font_size=20";
        const SQUARE_IMAGES = [
          "https://fakeimg.pl/20x20/?text=1&font_size=20",
          "https://fakeimg.pl/20x20/?text=2&font_size=20",
          "https://fakeimg.pl/20x20/?text=3&font_size=20",
          "https://fakeimg.pl/20x20/?text=4&font_size=20",
          "https://fakeimg.pl/20x20/?text=5&font_size=20",
          "https://fakeimg.pl/20x20/?text=6&font_size=20",
          "https://fakeimg.pl/20x20/?text=7&font_size=20",
          "https://fakeimg.pl/20x20/?text=8&font_size=20",
          "https://fakeimg.pl/20x20/?text=9&font_size=20",
          "https://fakeimg.pl/20x20/?text=10&font_size=20",
          DEFAULT_SQUARE_IMAGE
        ];

        const container = document.querySelector(".squares-container-js");
        if (!container) {
          throw new Error(
            "Element with [.squares-container-js] selector not found"
          );
        }

        container.innerHTML = "";

        for (let i = 0; i < SQARES_NUMBER; i++) {
          const square = document.createElement("div");
          square.className = "square square-js";
          square.id = "square" + i;
          square.style.left = HORISONTAL_STEP_PX * i + "px";
          square.style.top = VERTICAL_STEP_PX * i + "px";
          square.dataset.imageIndex = -1;

          const squareImage = document.createElement("img");
          squareImage.src = DEFAULT_SQUARE_IMAGE;
          square.appendChild(squareImage);

          container.appendChild(square);
        }

        let shouldBeDecreased = false;
        document.addEventListener("keydown", function (e) {
          shouldBeDecreased = shouldBeDecreased || e.key === DECREASE_KEY;
        });

        document.addEventListener("keyup", function (e) {
          if (shouldBeDecreased && e.key === DECREASE_KEY) {
            shouldBeDecreased = false;
          }
        });

        container.addEventListener("click", function (e) {
          let target = e.target;
          const selector = ".square-js";

          if (!target) {
            return;
          }

          if (!target.matches(selector)) {
            target = target.closest(selector);
            if (!target) {
              return;
            }
          }

          const currentImageIndex = +(target.dataset.imageIndex || 0);
          const step = shouldBeDecreased ? -1 : 1;

          let newImageIndex = (currentImageIndex + step) % SQUARE_IMAGES.length;
          if (newImageIndex < 0) {
            newImageIndex += SQUARE_IMAGES.length;
          }

          target.dataset.imageIndex = newImageIndex;
          target.querySelector("img").src = SQUARE_IMAGES[newImageIndex];
        });
      });

      if (document.readyState === "complete") {
        document.dispatchEvent(new Event("DOMContentLoaded"));
      }
    </script>
  </head>

  <body>
    <div class="centerColumn">
      <div id="textBlock">
        <div id="XO" class="squares-container-js">
          Loading...
        </div>
      </div>
    </div>
  </body>
</html>

рони 01.07.2022 01:13 
<!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 elem = document.querySelector("#XO");
            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 num = 51;//сколько блоков создать
            let arr = Array.from({
                length: num
            }, v => `<div class="square" data-index="0"><img src = '${src[0]}'></div>`)
            elem.insertAdjacentHTML("beforeend", arr.join(''));
            let up = 1;
            document.addEventListener("keydown", function(e) {
                if (e.shiftKey) up = -1;
            })
            document.addEventListener("keyup", function(e) {
                up = 1;
            })
            elem.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 id="XO"></div>
</body>
</html>

Nexus 01.07.2022 01:32
рони, 54-я строка - крутое решение, я до такого не додумался)
Что element.closest может еще и "себя" вернуть не знал.

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

рони 01.07.2022 02:15
Цитата:
Сообщение от Nexus
считаете, что ТС оно может быть вовсе не нужно?
вангую что нужна линейка блоков)))

рони 01.07.2022 02:18
Цитата:
Сообщение от Nexus
рони, 54-я строка - крутое решение, я до такого не додумался)
я тоже,
решение подсмотрено у https://javascript.ru/forum/members/4857-malleys/

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

строка 42

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

sober 01.07.2022 13:54
Цитата:
Сообщение от рони (Сообщение 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>


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

рони 01.07.2022 14:07
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>

sober 01.07.2022 15:59
Цитата:
Сообщение от рони (Сообщение 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>


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


Часовой пояс GMT +3, время: 06:35.