Фоновые изображения меняются одним щелчком мыши

Question

Я пытаюсь изменить свои 4 фоновых изображения на mouseclick.

В настоящий момент одно и то же изображение появляется на экране 4 раза (по одному в каждом углу). Я хотел бы, чтобы на весь экран отображалось только одно изображение, а другие заменяли его, когда я нажимаю на текущее изображение; и так далее, и так далее при повторном нажатии. Я не уверен, что сейчас не так с моим кодом.

HTML:

<!DOCTYPE html>
<html lang="fr" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  <title> CODE </title>
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <script src="js/jquery.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="js/sketch.js"></script>

</head>

<body>

<div id="body" class="imageOne"></div>

</body>

</html>

JS:

var bodyObj,
  className,
  index;

bodyObj = document.getElementById('body');
index = 1;
className = [
  'imageOne',
  'imageTwo'
];

function updateIndex() {
  if (index === 0) {
    index = 1;
  } else {
    index = 0;
  }
}

bodyObj.onclick = function(e) {
  e.currentTarget.className = className[index];
  updateIndex();
}

CSS:

html, body, #body {
    height: 100%;
    width: 100%;
}

#body.imageOne {
    background-image: url("img1.png");
}

#body.imageTwo {
    background-image: url("img2.png");
}

#body.imageTwo {
    background-image: url("img3.png");
}

#body.imageTwo {
    background-image: url("img4.png");
}

javascript html onclick addeventlistener mouseclick-event

0

jaga 23 Окт 2019 в 01:21

Answer 1

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

let imgList = [
  'https://dummyimage.com/200x200/000/fff&text=image+1',
  'https://dummyimage.com/200x200/000/fff&text=image+2', 'https://dummyimage.com/200x200/000/fff&text=image+3', 'https://dummyimage.com/200x200/000/fff&text=image+4'
];

let currentIndex = 0;

function changeImg() {
  $('#body').css('backgroundImage', `url(${imgList[currentIndex]})`);
  currentIndex++;
  if (currentIndex == imgList.length) currentIndex = 0;
}

changeImg();

$('#body').on('click', changeImg);

#body {
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="body" class="imageOne"></div>

1

Nidhin Joseph 23 Окт 2019 в 01:31

Answer 2

Вот еще один способ (используя классы, как и вы):

var bodyObj   = document.getElementById('body'),
    index     = 0,
    className = [
      'imageOne',
      'imageTwo',
      'imageThree',
      'imageFour'
    ];

bodyObj.onclick = function(e) {
  index = (index + 1) % className.length;
  e.currentTarget.className = className[index];
}

html,body,#body { margin: 0; height: 100%; width: 100%; }

#body { background-position: center; background-size: cover; }

#body.imageOne { background-image: url("https://picsum.photos/id/9/536/354"); }
#body.imageTwo { background-image: url("https://picsum.photos/id/3/536/354"); }
#body.imageThree { background-image: url("https://picsum.photos/id/1/536/354"); }
#body.imageFour { background-image: url("https://picsum.photos/id/2/536/354"); }

<div id="body" class="imageOne"></div>

1

blex 23 Окт 2019 в 01:33

Answer 3

Я попробовал этот, который работает очень хорошо!

var index = 0;
var className = ['imageOne',
'imageTwo',
'imageThree',
'imageFour',
'imageFive'];

$(document).ready(function() {
$("#main").on("click", function() {
index = (index + 1) % className.length;
$(this).attr('class', className[index]);
});
});

0

jaga 23 Окт 2019 в 23:53

Фоновые изображения меняются одним щелчком мыши

3 ответа

Похожие вопросы

Новые вопросы

javascript