Question

所以我试图在点击时使用javascript进行多次背景图像更改。

任何人都可以在这里帮助我试图通过点击更改多个背景图像，使用此代码我得到2个图像更改但是在函数updateIndex的某处我无法解决如何在多个图像中使其连续。

提前多多感谢！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <div id="body" class="imageOne"></div>
  <style>
    html,
    body, {
      height: 100%;
      width: 100%;
    }

    #body.imageOne {
      background-image: url("first.svg");
    }

    #body.imageTwo {
      background-image: url("2.svg");
    }

    #body.imageThree {
      background-image: url("3.svg");
    }

    #body.imageFour {
      background-image: url("first.svg");
    }
  </style>

  <script>
    var bodyObj, className, index;

    // all background images, calling them to change

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

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

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

Answer 1

将index设置为0
并且为了循环使用++index % className.length

＆＃13;

var className = ['imageOne','imageTwo','imageThree','imageFour'], 
    index = 0;

function updateClassName() {
  this.className = className[++index % className.length];
}

document.getElementById('body').addEventListener("click", updateClassName);

＆＃13;

html, body{height: 100%;width: 100%; margin:0;}
#body{height:100%;}
#body.imageOne   {background-image: url("//placehold.it/800x600/0bf");}
#body.imageTwo   {background-image: url("//placehold.it/800x600/f0b");}
#body.imageThree {background-image: url("//placehold.it/800x600/b0f");}
#body.imageFour  {background-image: url("//placehold.it/800x600/fb0");}

＆＃13;

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

＆＃13;

Answer 2

问题是由updateIndex()函数中的逻辑引起的。您只需将index设置为0，或设置为1，然后立即将2设置为index。它不会循环。

要修复逻辑，您只需在每次连续点击时增加var bodyObj = document.getElementById('body'), index = 1, className = ['imageOne', 'imageTwo', 'imageThree', 'imageFour']; // remove trailing comma here function updateIndex() { index = ++index % className.length; } bodyObj.addEventListener('click', function(e) { e.currentTarget.className = className[index]; updateIndex(); });即可。试试这个：

＆＃13;

#body {
  height: 250px;
  width: 250px;
}
#body.imageOne { background-image: url("https://dummyimage.com/250/000000/ffffff"); }
#body.imageTwo { background-image: url("https://dummyimage.com/250/cc0000/000000"); }
#body.imageThree { background-image: url("https://dummyimage.com/250/00cc00/000000"); }
#body.imageFour { background-image: url("https://dummyimage.com/250/0000cc/000000"); }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="body" class="imageOne"></div>

＆＃13;

addEventListener()

＆＃13;

另请注意onclick使用过时的git filter-branch --force --index-filter 'git rm -r --cached --ignore-unmatch [paths]' --prune-empty --tag-name-filter cat -- --all。

使用javascript点击更改多个背景图片

2 个答案: