jquery - Events in a JQuery plugin

Question

I am just starting out with JQuery plugins. I have written one this evening which works fine and does what I need it to do, however, I could do with it raising and event called "onSlideStart" at the two locations marked in my code sample below. I have no clue how to define the events or call them and i'm struggling to find anything in the JQuery docs or googling which is helping me to understand how to do this.

Would really appreciate some help with this.

(function ($) {

        $.fn.divSlider = function (action) {

            if (action === "next") {
                var nextSlider = this.find('.slider-item-active').next('.slider-item');
                var currentSlider = this.find('.slider-item-active');

                if (nextSlider.length === 0) {
                    return;
                }
                //SLIDESTART

                nextSlider.animate({"left": "0"}, "slow").removeClass('slider-item').addClass('slider-item-active');
                currentSlider.animate({"left": "-100%"}, "slow").removeClass('slider-item-active').addClass('slider-item');
            }

            if (action === "prev") {
                var nextSlider = this.find('.slider-item-active').prev('.slider-item');
                var currentSlider = this.find('.slider-item-active');

                if (nextSlider.length === 0) {
                    return;
                }

                //SLIDESTART
                nextSlider.animate({"left": "0"}, "slow").removeClass('slider-item').addClass('slider-item-active');
                currentSlider.animate({"left": "100%"}, "slow").removeClass('slider-item-active').addClass('slider-item');
            }

        };

    }(jQuery));

标签： jqueryeventscallbackjquery-plugins

Answer 1

本文可能会帮助您开始使用自定义事件。基本上，您需要.trigger()自定义事件并使用 订阅它的元素.on()，如下所示：

$.fn.doFancyStuff = function(action, opts) {
  var counter = opts.delay, timer = -1;
  var message;

  // Do something special with "action" argument here if need be
  // ...

  timer = setInterval(function() {
    if (counter--) {
      message = `${opts.gerund} in ${counter + 1} second(s)...`;

      // Triggers the custom event
      this.trigger('action:start', [message]);
    } 
    else {
      message = `You ${opts.v3} ${opts.delay} times.`;

      this.trigger('action:done', [message]);
      clearInterval(timer);
    }
  }.bind(this), 1000);

  // Return the instance so we can "chain" them
  return this;
}

$('span.counter')
  .doFancyStuff('dance', {
    delay: 5,
    gerund: 'Dancing',
    v3: 'danced'
  })
  .on('action:start action:done', function(e, message) {
    $(this).text(message);
  });

.counter {
  background-color: lavender;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="counter"></span>

所以对于你的情况：

$.fn.divSlider = function (action) {
  if (action === "next") {
    var nextSlider = this.find('.slider-item-active').next('.slider-item');
    var currentSlider = this.find('.slider-item-active');

    if (nextSlider.length === 0) {
      return;
    }

    // Triggers the custom event
    this.trigger('onSlideStart');

    nextSlider.animate({"left": "0"}, "slow").removeClass('slider-item').addClass('slider-item-active');
    currentSlider.animate({"left": "-100%"}, "slow").removeClass('slider-item-active').addClass('slider-item');
  }

// ...

$('some_selector')
  .divSlider('next')
  .on('onSlideStart', function (e) {
    // Do something

  });