我需要将以下鼠标滚轮事件转换为可调用函数

Question

#horiz 是我想要应用粗体代码的任何通用标签。我正在使用 jScrollPane 和 jQuery MouseWheel 库。

$("#horiz").mousewheel(function(event, delta) {
    **event.preventDefault();
    $(this).find(".jspPane").animate({"left": "+=" + (50 * delta) + "px"}, 0);
    $(this).find(".jspPane").css("left").replace(/[^-\d\.]/g, '') > 0 ? $(this).find(".jspPane").animate({"left": "0px"}, 0) : null;
    $(this).find(".jspPane").css("left").replace(/[^-\d\.]/g, '') < (($(this).find("#scrollText").css("width").replace(/[^-\d\.]/g, '') - $(this).css("width").replace(/[^-\d\.]/g, '')) * -1) ? $(this).find(".jspPane").animate({"left": (($(this).find("#scrollText").css("width").replace(/[^-\d\.]/g, '') - $(this).css("width").replace(/[^-\d\.]/g, '')) * -1) + "px"}, 0) : null;
    if($(this).find(".jspTrack").css("width").replace(/[^-\d\.]/g, '') - $(this).find(".jspDrag").css("width").replace(/[^-\d\.]/g, '') == $(this).find(".jspDrag").css("left").replace(/[^-\d\.]/g, '')) {
        //Track End - Right
    } else if ($(this).find(".jspDrag").css("left").replace(/[^-\d\.]/g, '') == 0) {
        //Track End - Left
    } else {
        //Track Mid - Anywhere between ends
    }**
});

Answer 1

每当您需要对特定 DOM 对象执行大量调用时，通常最好将功能包装到 jQuery 插件中。从长远来看，您的代码将更具可维护性。

$(document).ready(function() {

    $.extend({

      myMouseScrollable: function() {

        return this.each(function() {

          var $self = $self;
          var $jsPane = $self.find(".jsPane");
          var OnMouseScroll = function(event, delta) {

             $jsPane.animate({"left": "+=" + (50 * delta) + "px"}, 0);
             $jsPane.css("left").replace(/[^-\d\.]/g, '') > 0 ? $jsPane.animate({"left": "0px"}, 0) : null;
             $jsPane.css("left").replace(/[^-\d\.]/g, '') < (($self.find("#scrollText").css("width").replace(/[^-\d\.]/g, '') - $self.css("width").replace(/[^-\d\.]/g, '')) * -1) ? $jsPane.animate({"left": (($self.find("#scrollText").css("width").replace(/[^-\d\.]/g, '') - $self.css("width").replace(/[^-\d\.]/g, '')) * -1) + "px"}, 0) : null;
             if($self.find(".jspTrack").css("width").replace(/[^-\d\.]/g, '') - $self.find(".jspDrag").css("width").replace(/[^-\d\.]/g, '') == $self.find(".jspDrag").css("left").replace(/[^-\d\.]/g, '')) {
                  //Track End - Right
             } else if ($self.find(".jspDrag").css("left").replace(/[^-\d\.]/g, '') == 0) {
                  //Track End - Left
              } else {
                  //Track Mid - Anywhere between ends
              }**
          }

          $self.mousewheel(OnMouseScroll);


        });

      }

    });

  });

现在，每当您需要将此事件应用于新对象时，您只需：

$("#horiz").myMouseScrollable();

我对您拥有的代码进行了一些优化。缓存选择器总是一个好主意，而不是一遍又一遍地使用它们。

特别是重复调用 $self.find('.jsPane');

Answer 2

您通过 Id 将 .mousewheel 事件绑定到特定元素来应用此代码（我希望页面上只有一个 id=horiz 的元素）。您可以使用类而不是 ID 对页面上的任何元素执行此操作。

这会将您的函数应用于具有 Id horiz 的元素以及页面上具有类 myMouseWheelBinding 的任何元素

$("#horiz, .myMouseWheelBinding").mousewheel(function(event, delta) { 
   //Your code here
});

，或者只是省略 id 并使用该类（不要忘记将该类添加到您的 horiz 元素）

$(".myMouseWheelBinding").mousewheel(function(event, delta) { 
   //Your code here
});

Html< /强>：

<div class="myMouseWheelBinding"...