Question

我只是从JQuery插件开始。今天晚上我写了一篇很好的文章，做了我需要做的事情，但是，我可以在下面的代码示例中标记的两个位置进行它的引发和名为“ onSlideStart”的事件。我不知道如何定义事件或调用事件，我正努力在JQuery文档或Google搜索中寻找任何内容，这正在帮助我了解如何执行此操作。

真的很感谢您的帮助。

(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可能会帮助您开始使用自定义事件。基本上，您需要.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

  });

JQuery插件中的事件

1 个答案: