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的 - 每個元素

回答

相關問題