JQuery 插件中的事件

Question

我刚开始使用 JQuery 插件。我今晚写了一个，它工作正常并且可以完成我需要它做的事情，但是，我可以在下面的代码示例中标记的两个位置使用它引发和事件调用 "onSlideStart" 。我不知道如何定义事件或调用它们，我正在努力在 JQuery 文档或谷歌搜索中找到任何有助于我理解如何执行此操作的内容。

非常感谢对此的一些帮助。

(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));

Answer 1

This article might help you getting started with Custom Events. Basically you need to .trigger() the custom event and have an element subscribed to it with .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

  });

JQuery 插件中的事件

Events in a JQuery plugin

jquery

events

callback

jquery-plugins