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

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 >
  <div id="cf4a">
      <img id="slideimg0" data-url="/actor/al-pacino/"  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/"  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>

Run the code Snippet and click on the image, the URL situated in img data-url="/ /" should be printed on the console. For some reason console doesn't print when clicking on the first img having class .showMe. /actors/al-pacinois somehow not printing. Because the .showMe is dynamically added and removed I used the .on() function of JQUERY but this doesn't work on the first image.

CodePudding user response：

Since both images are absolutely positioned to the same place, the click event isn't being sent properly to the image that's visible.

Use the pointer-events style to prevent clicks from being sent to the hidden images.

I've also changed the addClass() and removeClass() functions to use the classList property rather than performing string operations on 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 >
  <div id="cf4a">
      <img id="slideimg0" data-url="/actor/al-pacino/"  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/"  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>