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"...

我需要将以下mousewheel事件转换为可调用函数

2 个答案: