javascript - 创建图片库时如何解决全局变量问题？

Question

我正在尝试为 pixi.js 中的项目创建点击图片库。当您单击屏幕右侧时，您可以在我的 fiddle 中看到它会添加下一张图像。问题是当您单击左侧删除图像时，它只会删除一个图像而不会删除其余图像。

我知道为什么会这样，因为“图像”是一个全局变量，它只保存最后添加的图像。我的函数无法获取之前添加的图像。但是，我一直在想办法解决。谁能帮我调整我的代码？我的 JS 和 fiddle 在下面。

  const bodyTag = document.querySelector("body")
  const nextTag = document.querySelector("div.right")
  const backTag = document.querySelector("div.left")

  let type = "WebGL"
  if(!PIXI.utils.isWebGLSupported()){
    type = "canvas"
  }

  // Aliases
  let Application = PIXI.Application,
      loader = PIXI.loader,
      resources = PIXI.loader.resources,
      Sprite = PIXI.Sprite;

  //Create a pixi application
  let app = new PIXI.Application({
    width: 2000,
    height: 2000,
    transparent: false,
    antialias: true,
    resolution: 1

  })

  //Add the canvas that Pixi automatically created for you to the html document
  bodyTag.appendChild(app.view);

  let image = null
  let image2 = null
  let imageCreated = false
  let step = 0
  let left = 0

  var images = [
    "https://i.imgur.com/HEwZDoW.jpg",
    "https://i.imgur.com/F5XOYH7.jpg",
    "https://i.imgur.com/e29HpQj.jpg",
    "https://i.imgur.com/2FaU2fI.jpg",
    "https://i.imgur.com/fsyrScY.jpg"
  ]


  loader
    .add([
      images
    ])

    const createSprite = function() {
      imageCreated = true
      image = new Sprite(resources[images[step]].texture)
      image.width = 400;
      image.height = 300;
      image.x = left
      app.stage.addChild(image)
      step += 1
      left += 40
    }

    const removeSprite = function() {
      app.stage.removeChild(image)
      step -= 1
    }


    loader.load((loader, resources) => {
        createSprite()
      })


    nextTag.addEventListener("click", function() {
      console.log("next")
      createSprite()
    })

    backTag.addEventListener("click", function() {
      console.log("back")
      removeSprite()
    })

* {
  padding: 0;
  margin: 0;
}

body {
  margin:0;
  padding:0;
  overflow:hidden;
}

canvas {
  display:block;
}

div.left {
  position: fixed;
  top: 0;
  left: 0;
  width: 50vw;
  height: 100vh;
  cursor: pointer;
}

div.right {
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100vh;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.6/pixi.js"></script>
<div class="left"></div>
  <div class="right"></div>

Answer 1

使用数组保存添加到屏幕的图像，而不是将每个图像保存到单个变量中，

点击左边的 div 在图像数组上执行弹出，它将给出最后添加的图像并将其删除

const bodyTag = document.querySelector("body")
  const nextTag = document.querySelector("div.right")
  const backTag = document.querySelector("div.left")

  let type = "WebGL"
  if(!PIXI.utils.isWebGLSupported()){
    type = "canvas"
  }

  // Aliases
  let Application = PIXI.Application,
      loader = PIXI.loader,
      resources = PIXI.loader.resources,
      Sprite = PIXI.Sprite;

  //Create a pixi application
  let app = new PIXI.Application({
    width: 2000,
    height: 2000,
    transparent: false,
    antialias: true,
    resolution: 1

  })

  //Add the canvas that Pixi automatically created for you to the html document
  bodyTag.appendChild(app.view);

  //use array for storing images
  let imageSet = []
  let image2 = null
  let imageCreated = false
  let step = 0
  let left = 0

  var images = [
    "https://i.imgur.com/HEwZDoW.jpg",
    "https://i.imgur.com/F5XOYH7.jpg",
    "https://i.imgur.com/e29HpQj.jpg",
    "https://i.imgur.com/2FaU2fI.jpg",
    "https://i.imgur.com/fsyrScY.jpg"
  ]


  loader
    .add([
      images
    ])

    const createSprite = function() {
      imageCreated = true
      //create an image
      let image = new Sprite(resources[images[step]].texture)
      image.width = 400;
      image.height = 300;
      image.x = left
      
      //push created images reference into images array
      imageSet.push(image)
      app.stage.addChild(image)
      step += 1
      left += 40
      
    }

    const removeSprite = function() {
    
      //get the last element from image array
      let image = imageSet.pop();
      
      app.stage.removeChild(image)
      step -= 1
      
    //reset left
      left -= 40
    }


    loader.load((loader, resources) => {
        createSprite()
      })


    nextTag.addEventListener("click", function() {
      console.log("next")
      createSprite()
    })

    backTag.addEventListener("click", function(event) {
      console.log("back")
      removeSprite()
    })

* {
  padding: 0;
  margin: 0;
}

body {
  margin:0;
  padding:0;
  overflow:hidden;
}

canvas {
  display:block;
}

div.left {
  position: fixed;
  top: 0;
  left: 0;
  width: 50vw;
  height: 100vh;
  cursor: pointer;
}

div.right {
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100vh;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.6/pixi.js"></script>
<div class="left"></div>
  <div class="right"></div>