Question

我正试图设置一个click事件，以便在模式上单击IMG时将显示其中的图像。

我尝试使用Google搜索，并在这里查看，但无济于事。也许我只是说错了。

<div class="modal">
        <div class="modalContent">
          <h2> Full size! </h2>
          <img src="" class="modalImg">
        </div>
      </div>
        <div class="gallery">
              <img src="img/twilight.jpeg" alt="man in the night" class="showcase">
          </div>

          <div class="list">
            <img src="img/code.jpeg" alt="code on a laptop" class="img1">
            <img src="img/desk.jpeg" alt="desk setup" class="img2">
            <img src="img/iphone.jpeg" alt="Iphone x" class="img3">
            <img src="img/keyboard.jpg" alt="glowing keyboard" class="img4">
            <img src="img/lips.jpg" alt="bloody lips" class="img5">
            <img src="img/crowbar.jpg" alt="man holding crowbar" class="img6">
            <img src="img/horror.jpeg" alt="horror image" class="img7">
            <img src="img/hands.jpeg" alt="bloody hands" class="img8">
          </div>

const modal = document.querySelector('.modal');
const img = document.querySelector('.img1');
const myImg = document.querySelector('.modalImg');
img.addEventListener('click', () => {
  modal.style.display = 'block';
  myImg.src = this.src;
});


I'm just attempting to have this work on the first image now, So i'm hoping to make is so on click the image shows in a pop modal. now the modal shows up just fine and has the h2 set but nothing shows up aside from that.

Answer 1

将您的功能从箭头功能更改为普通功能即可。

const modal = document.querySelector('.modal');
const img = document.querySelector('.img1');
const myImg = document.querySelector('.modalImg');
-- img.addEventListener('click', () => {
++ img.addEventListener('click', function() {
  modal.style.display = 'block';
  myImg.src = this.src;
});

根据popBackStack(int, boolean)，箭头函数没有它自己的箭头函数，它遵循常规的变量查找规则。因此，如果需要获取image.src，则需要使用功能关键字而不是箭头功能。

模态图像未出现

1 个答案: