无法单击交叉淡化效果中的第一个图像

Question

var timer = setInterval(nextImage, 4000);
var curImage = 0;
var numImages = 2;

function nextImage() {
    var e;
    // remove showMe class from current image
    e = document.getElementById("slideimg" + curImage);
    removeClass(e, "showMe");

    // compute next image
    curImage++;
    if (curImage > numImages - 1) {
        curImage = 0;
    }

    // add showMe class to next image
    e = document.getElementById("slideimg" + curImage);
    addClass(e, "showMe");
}

function addClass(elem, name) {
    var c = elem.className;
    if (c) c += " ";  // if not blank, add a space separator
    c += name;
    elem.className = c;
}

function removeClass(elem, name) {
    var c = elem.className;
    elem.className = c.replace(name, "").replace(/\s+/g, " ").replace(/^\s+|\s+$/g, "");  // remove name and extra blanks
}



$('#cf4a').on('click', '.slide.showMe', function () {
    let url = $(this).attr('data-url')
    console.log(url)
    //location.href = url (this is where the user should go when clicking on the image)

})

#cf4a {
    position: relative;
    width: 5em !important;
}

.container {
  width: 100vh;
  height: 60vh;
}

.slide {
    border: none;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
    transition: opacity 2s linear;
}

.showMe {
    opacity: 1;
}

<div class="container">
  <div id="cf4a">
      <img id="slideimg0" data-url="/actor/al-pacino/" class="slide showMe" src="https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg" width="500">
      <img id="slideimg1" data-url="/actor/patrick-stewart/" class="slide" src="https://i.pinimg.com/originals/ee/85/08/ee850842e68cfcf6e3943c048f45c6d1.jpg" width="500"
          style="position: relative; left: -5rem;">
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

运行代码片段并单击图像，位于 img data-url="/ /" 中的 URL 应打印在控制台上。出于某种原因，当单击具有 class .showMe 的第一个 img 时，控制台不会打印。 /actors/al-pacino不知何故无法打印。因为 .showMe 是动态添加和删除的，所以我使用了 JQUERY 的 .on() 函数，但这在第一张图片上不起作用。

Answer 1

由于两张图片绝对位于同一位置，因此点击事件未正确发送到可见的图片。

使用 pointer-events 样式来防止点击被发送到隐藏的图像。

我还更改了 addClass() 和 removeClass() 函数以使用 classList 属性而不是对 className 执行字符串操作。

var timer = setInterval(nextImage, 4000);
var curImage = 0;
var numImages = 2;

function nextImage() {
    var e;
    // remove showMe class from current image
    e = document.getElementById("slideimg" + curImage);
    removeClass(e, "showMe");

    // compute next image
    curImage++;
    if (curImage > numImages - 1) {
        curImage = 0;
    }

    // add showMe class to next image
    e = document.getElementById("slideimg" + curImage);
    addClass(e, "showMe");
}

function addClass(elem, name) {
    elem.classList.add(name);
}

function removeClass(elem, name) {
    elem.classList.remove(name);
}



$('#cf4a').on('click', '.slide', function () {
    let url = $(this).attr('data-url')
    console.log(url)
    //location.href = url (this is where the user should go when clicking on the image)

})

#cf4a {
    position: relative;
    width: 5em !important;
}

.container {
  width: 100vh;
  height: 60vh;
}

.slide {
    border: none;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
    transition: opacity 2s linear;
    pointer-events: none;
}

.showMe {
    opacity: 1;
    pointer-events: auto;
}

<div class="container">
  <div id="cf4a">
      <img id="slideimg0" data-url="/actor/al-pacino/" class="slide showMe" src="https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg" width="500">
      <img id="slideimg1" data-url="/actor/patrick-stewart/" class="slide" src="https://i.pinimg.com/originals/ee/85/08/ee850842e68cfcf6e3943c048f45c6d1.jpg" width="500"
          style="position: relative; left: -5rem;">
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

无法单击交叉淡化效果中的第一个图像

Can't Click on the First Image in the crossfading effect

javascript

html

jquery