如何使用按钮同时添加和删除图像？

Question

我有一个 .canvas 类的部分，我想在上面显示图像（它是薯条的图片，我希望浇头出现在上面）。我已经设法让图像出现在具有画布类的部分上，但它们都堆叠在一起。如何使用相同的按钮同时添加图像并删除前一个图像，最好使用 jQuery。

$('#randomize').on('click', function() {
    const imgArray = $('.imgContainer');
    const randomImg = Math.floor(Math.random() * imgArray.length) + 1;

    for (let i = 0; i < imgArray.length; i++) {
      
      if (randomImg === 1) {
        imgArray[0].style.display = 'block';
      } else if (randomImg === 2) {
        imgArray[1].style.display = 'block';
      } else if (randomImg === 3) {
        imgArray[2].style.display = 'block';
      } else if (randomImg === 4) {
        imgArray[3].style.display = 'block';
      } else if (randomImg === 5) {
        imgArray[4].style.display = 'block';
      } else if (randomImg === 6) {
        imgArray[5].style.display = 'block';
      } else if (randomImg === 7) {
        imgArray[6].style.display = 'block';
      } else if (randomImg === 8) {
        imgArray[7].style.display = 'block';
      } else if (randomImg === 9) {
        imgArray[8].style.display = 'block';
      } else {
        imgArray[9].style.display = 'block';
      }  

.imgContainer {
      display: none;
    }

  <button id="randomize">Feed me</button>

<section class="canvas">
          <div class="imgContainer ketchup">
            <img src="./assets/images/ketchup.png" alt="">
          </div>

          <div class="imgContainer cheese">
            <img src="./assets/images/cheeseCurds.png" alt="">
          </div>

          <div class="imgContainer peppers">
            <img src="./assets/images/hotPeppers.png" alt="">
          </div>

          <div class="imgContainer bacon">
            <img src="./assets/images/baconBits.png" alt="">
          </div>

          <div class="imgContainer iceCream">
            <img src="./assets/images/iceCream.png" alt="">
          </div>

          <div class="imgContainer sprinkles">
            <img src="./assets/images/sprinkles.png" alt="">
          </div>

          <div class="imgContainer vaccine">
            <img src="./assets/images/vaccine.png" alt="">
          </div>

          <div class="imgContainer kitten">
            <img src="./assets/images/kitten.png" alt="">
          </div>

          <div class="imgContainer sock">
            <img src="./assets/images/dirtySock.png" alt="">
          </div>

          <div class="imgContainer face">
            <img src="./assets/images/brendanFraser.png" alt="">
          </div>
        </section>

sn-p 在这里无法正常运行，因为它不包含整个文件。我只是不知道如何在删除前一张图片的同时添加一张图片。

Answer 1

我们真的不需要所有这些代码，也不需要 +1。否则你会得到一个错误，因为它是未定义的：

const randomImg = Math.floor(Math.random() * imgArray.length);
imgArray[randomImg].style.display = 'block';

我们正在做的是找到一个介于 0 和 6 之间的随机数，因为数组中有 7 个图像。 click 事件处理程序将始终更改，因此不需要循环或 if 语句。

const imgArray = $('.imgContainer');
  
$('#randomize').on('click', function() {
    $('.imgContainer').hide();
    const randomImg = Math.floor(Math.random() * imgArray.length);
    $('.number-check').html(randomImg);
    imgArray[randomImg].style.display = 'block';
  });

.imgContainer {
      display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="randomize">Feed me</button>
<div>Lets check the number: <span class="number-check"></span></div>
<section class="canvas">
    <div class="imgContainer ketchup">
       <img src="https://picsum.photos/id/122/200/300" alt="">
     </div>

          <div class="imgContainer cheese">
            <img src="https://picsum.photos/id/144/200/300" alt="">
          </div>

          <div class="imgContainer peppers">
            <img src="https://picsum.photos/id/198/200/300" alt="">
          </div>
         <div class="imgContainer peppers">
            <img src="https://picsum.photos/200/300" alt="">
          </div>
         <div class="imgContainer peppers">
            <img src="https://picsum.photos/id/137/200/300" alt="">
          </div>
         <div class="imgContainer peppers">
            <img src="https://picsum.photos/id/111/200/300" alt="">
          </div>
         <div class="imgContainer peppers">
            <img src="https://picsum.photos/id/237/200/300" alt="">
          </div>

        </section>

Answer 2

例如，您可以在显示任何内容之前简单地隐藏所有内容。

 $('.imgContainer').hide();

$('#randomize').on('click', function() {
    const imgArray = $('.imgContainer');
    const randomImg = Math.floor(Math.random() * imgArray.length) + 1;
    
$('.imgContainer').hide();

    for (let i = 0; i < imgArray.length; i++) {
      
      if (randomImg === 1) {
        imgArray[0].style.display = 'block';
      } else if (randomImg === 2) {
        imgArray[1].style.display = 'block';
      } else if (randomImg === 3) {
        imgArray[2].style.display = 'block';
      }
      
      
 } });

.imgContainer {
      display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="randomize">Feed me</button>

<section class="canvas">
          <div class="imgContainer ketchup">
            <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.W8Ixmq-tCRyq4hwmsRrVqgHaDt%26pid%3DApi&f=1" alt="">
          </div>

          <div class="imgContainer cheese">
            <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpmcvariety.files.wordpress.com%2F2019%2F12%2Fbaby-yoda-plush-toy-mattel-the-mandalorian.png%3Fw%3D1000%26h%3D563%26crop%3D1&f=1&nofb=1" alt="">
          </div>

          <div class="imgContainer peppers">
            <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.digitaltveurope.com%2Ffiles%2F2019%2F12%2FBaby-Yoda-Soup.jpg&f=1&nofb=1" alt="">
          </div>

        </section>