jQuery的 - 每个元素

我正在写一个快速的插件（我的第一个），以帮助按钮定义不同的选项，如果支持JS：jQuery的 - 每个元素

(function ($) { 
$.fn.extend({ 
    chemButton : function (options) { 
     return this.each(function() { 
      myoptions = $.extend({ x: '0px', y: '0px', xHover: '0px', yHover: '0px', xActive: '0px', yActive: '0px' }, options); 
      var ob = $(this); 
      ob.addClass('chemButton'); 
      var focus = false; 
      ob.mousedown(function() { 
       focus = true; 
       ob.children() 
        .css({ 'background-position' : myoptions.xActive + " " + myoptions.yActive }) 
        .addClass('VBfocus') 
        .removeClass('VBHover'); 
      }); 
      ob.mouseup(function(){ 
       focus = false; 
       ob.children() 
        .css({ 'background-position' : myoptions.xHover + " " + myoptions.yHover }) 
        .removeClass('VBfocus') 
        .addClass('VBHover'); 
       window.location.href = ob.find('a').attr('href'); 
      }); 
      if (focus === false) { 
       ob.children().hover(function() { 
        ob.children() 
         .css({ 'background-position' : myoptions.xHover + " " + myoptions.yHover }) 
         .removeClass('VBfocus') 
         .addClass('VBHover') 
         .find('a').addClass('VBHover'); 
       }, function() { 
        if (focus === false) { 
         ob.children() 
          .css({ 'background-position' : myoptions.x + " " + myoptions.y }) 
          .removeClass('VBfocus') 
          .removeClass('VBHover') 
          .find('a').removeClass('VBHover'); 
        } 
       }); 
      } 
     }); 
    } 
}); 
})(jQuery);

使用具有2个独立的按钮，当

我的插件即

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.panelButton').chemButton({ x: '0px', y: '0px', xHover: '0', yHover: '-30px', xActive: '0', yActive: '-60px' }); 
    $('.panelButton2').chemButton({ x: '0px', y: '-30px', xHover: '0', yHover: '-60px', xActive: '0', yActive: '0px' }); 
}); 
</script>

上次声明的选项应用于两个按钮。我如何仅适用于要用于的元素？

问候

来源

2011-07-15 Phil Jackson

不知道这是否是原因或没有，但不应

myoptions = $.extend({ x: '0px', y: '0px', xHover: '0px', yHover: '0px', xActive: '0px', yActive: '0px' }, options);

是

var myoptions = $.extend({ x: '0px', y: '0px', xHover: '0px', yHover: '0px', xActive: '0px', yActive: '0px' }, options);

我怀疑是通过不声明myoptions作为一个变种，它是一直推进到全球/窗口级别，并且每次都被覆盖。

来源

2011-07-15 08:10:43

现在你已经说过了，这很有道理！谢谢！ –

您应该声明你的选择之前该行：

return this.each(function() {

试试这个行：

var myoptions = $.extend({}, { x: '0px', y: '0px', xHover: '0px', yHover: '0px', xActive: '0px', yActive: '0px' }, options);

和删除每个（）函数中的前行 “myoptions”。

来源

2011-07-15 08:16:56 avall

jQuery的 - 每个元素

回答

相关问题