为什么 Javascript 单击事件不起作用

Question

I am trying to replicate this tutorial:

https://tympanus.net/codrops/2016/09/29/transition-effect-with-css-masks/ when I click the arrow it should slide to a different wrapper and init an animation, but for some reason is not working I tried to change and morphe it in Jquery but still not working

                     function init() {
                        ......

                          Slider.prototype.events = function () {
                          var self = this;
                          this.dom.arrow.on('click', function () {
                            if (self.working)
                            return;
                            self.processBtn($(this));
                          });
                       };
                     .-....
                    }

what could be possibly be the mistake?

Answer 1

try for loop

 fifi_slider.prototype.buildDots = function () {
      var _ = this;
      for (var i = 0; i < _.totalSlides; i++) {
        var dot = document.createElement('li');
        dot.setAttribute('data-slide', i + 1);
        _.def.dotsWrapper.appendChild(dot);
      }
      _.def.dotsWrapper.addEventListener('click', function (e) {
        if (e.target && e.target.nodeName == "LI") {
          _.curSlide = e.target.getAttribute('data-slide');
          _.gotoSlide();
        }
      }, false);
    }

Answer 2

You forgot to add a DOT to the arrow selector.

https://codepen.io/besciualex/pen/YzPzGOw?editors=1111

// Previous selector value (without DOT)
this.dom.arrow = this.dom.wrapper.find('arrow');

// Correct selector value (with DOT)
this.dom.arrow = this.dom.wrapper.find('.arrow');