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

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>

该代码段将无法在此处正常运行，因为它不包含整个文件。我只是不知道如何在删除前一个图像时添加图像。

标签： javascripthtmljquerycssfor-loop

Answer 1

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

 $('.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>