Javascript調用函數內的函數

我正在使用jquery插件作爲滑塊。它包含我試圖從外部調用的pauseSlide函數。這裏是插件：Javascript調用函數內的函數

(function ($) { 
    $.fn.liteSlider = function (options) { 

     var defaults = { 
      content: '.content', 
      width: 500, 
      height: 250, 
      autoplay: false, 
      delay: 3, 
      buttonsClass: '', 
      activeClass: '', 
      controlBt: '', 
      playText: ' Play', 
      pauseText: 'Pause' 
     }; 

     var options = $.extend(defaults, options); 

     var slideNo = 1; 
     var timer = 0; 
     var playStatus = options.autoplay; 
     var thisClass = ($(this).attr('class')).split(' '); 
     var theClass = '.' + thisClass[0]; 
     var count = 0; 
     var slides; 
     var currentSlide = 1; 
     var delay = parseInt(options.delay) * 1000; 

     $(this).children(options.content).each(function() { 
      slides = ++count; 
     }); 

     function wrapContent(ele) { 
      ele.wrap('<div class="sliderContentsWrap" />'); 
     } 

     function applyCss(ele) { 
      $('.sliderContentsWrap').css({ 
       padding: 0, 
       margin: 0, 
       width: options.width, 
       height: options.height, 
       overflow: 'hidden', 
       position: 'relative' 
      }); 

      ele.css({ 
       padding: 0, 
       margin: 0, 
       width: options.width * slides, 
       height: options.height, 
       position: 'absolute' 
      }); 

      ele.children(options.content).css({ 
       float: 'left', 
       width: options.width, 
       height: options.height 
      }); 
     } 

     function resetButtons() { 
      i = 0; 
      $('.' + options.buttonsClass).each(function() { 
       i++; 
       $(this).addClass('bt' + i); 
       $(this).attr('rel', i); 
      }); 
     } 

     function goToSlide(theSlide) { 

      var animateLeft = -(options.width) * (parseInt(theSlide) - 1); 
      $('.sliderContentsWrap' + ' ' + theClass) 
       .animate({ 
       left: animateLeft 
      }); 

      $('.' + options.buttonsClass).each(function() { 
       $(this).removeClass(options.activeClass); 
       if ($(this).hasClass('bt' + theSlide)) { 
        $(this).addClass(options.activeClass) 
       } 
      }); 

      currentSlide = theSlide; 
     } 

     function autoplay() { 
      if (currentSlide < slides) { 
       goToSlide(parseInt(currentSlide) + 1); 
      } else { 
       goToSlide(1); 
      } 
     } 

     function playSlide() { 
      clearInterval(timer); 
      timer = setInterval(function() { 
       autoplay(); 
      }, delay); 

      $(options.controlBt).text(options.pauseText); 
      playStatus = true; 
     } 

     function pauseSlide() { 
      clearInterval(timer); 
      $(options.controlBt).text(options.playText); 
      playStatus = false; 
     } 

     function init(ele) { 
      wrapContent(ele); 
      applyCss(ele); 
      resetButtons(); 

      if (options.autoplay == true) { 
       playSlide() 
      } else { 
       pauseSlide(); 
      } 
     } 

     return this.each(function() { 
      init($(this)); 

      $('.' + options.buttonsClass).click(function (e) { 
       e.preventDefault(); 
       pauseSlide(); 
       goToSlide($(this).attr('rel')); 
      }); 

      $(options.controlBt).click(function (e) { 
       e.preventDefault(); 
       if (playStatus == true) { 
        pauseSlide() 
       } else { 
        playSlide() 
       }; 
      }); 

     }); 

    }; 

    //added this 
    $.liteSlider = { 
     pause: function() { 
      alert('clicked'); 
      pauseSlide(); 
     } 
    }; 

})(jQuery);

這個我使用$.liteSlider.pause();其中顯示了警報之外，但它並沒有運行pauseSlide()功能。有什麼建議麼？

來源

2013-04-16 Tony

可能是範圍問題？嘗試將函數放在'（function（$）{'之外），看看它是否有幫助。 – showdev

pauseSlide超出範圍。一個簡單的方法可能是在範圍內聲明var pauseSlide;，然後再指定它。

(function ($) { 
    var pauseSlide; 

    $.fn.liteSlider = function (options) { 

     var defaults = { 
      content: '.content', 
      width: 500, 
      height: 250, 
      autoplay: false, 
      delay: 3, 
      buttonsClass: '', 
      activeClass: '', 
      controlBt: '', 
      playText: ' Play', 
      pauseText: 'Pause' 
     }; 

     var options = $.extend(defaults, options); 

     var slideNo = 1; 
     var timer = 0; 
     var playStatus = options.autoplay; 
     var thisClass = ($(this).attr('class')).split(' '); 
     var theClass = '.' + thisClass[0]; 
     var count = 0; 
     var slides; 
     var currentSlide = 1; 
     var delay = parseInt(options.delay) * 1000; 

     $(this).children(options.content).each(function() { 
      slides = ++count; 
     }); 

     function wrapContent(ele) { 
      ele.wrap('<div class="sliderContentsWrap" />'); 
     } 

     function applyCss(ele) { 
      $('.sliderContentsWrap').css({ 
       padding: 0, 
       margin: 0, 
       width: options.width, 
       height: options.height, 
       overflow: 'hidden', 
       position: 'relative' 
      }); 

      ele.css({ 
       padding: 0, 
       margin: 0, 
       width: options.width * slides, 
       height: options.height, 
       position: 'absolute' 
      }); 

      ele.children(options.content).css({ 
       float: 'left', 
       width: options.width, 
       height: options.height 
      }); 
     } 

     function resetButtons() { 
      i = 0; 
      $('.' + options.buttonsClass).each(function() { 
       i++; 
       $(this).addClass('bt' + i); 
       $(this).attr('rel', i); 
      }); 
     } 

     function goToSlide(theSlide) { 

      var animateLeft = -(options.width) * (parseInt(theSlide) - 1); 
      $('.sliderContentsWrap' + ' ' + theClass) 
       .animate({ 
       left: animateLeft 
      }); 

      $('.' + options.buttonsClass).each(function() { 
       $(this).removeClass(options.activeClass); 
       if ($(this).hasClass('bt' + theSlide)) { 
        $(this).addClass(options.activeClass) 
       } 
      }); 

      currentSlide = theSlide; 
     } 

     function autoplay() { 
      if (currentSlide < slides) { 
       goToSlide(parseInt(currentSlide) + 1); 
      } else { 
       goToSlide(1); 
      } 
     } 

     function playSlide() { 
      clearInterval(timer); 
      timer = setInterval(function() { 
       autoplay(); 
      }, delay); 

      $(options.controlBt).text(options.pauseText); 
      playStatus = true; 
     } 

     pauseSlide = function() { 
      clearInterval(timer); 
      $(options.controlBt).text(options.playText); 
      playStatus = false; 
     } 

     function init(ele) { 
      wrapContent(ele); 
      applyCss(ele); 
      resetButtons(); 

      if (options.autoplay == true) { 
       playSlide() 
      } else { 
       pauseSlide(); 
      } 
     } 

     return this.each(function() { 
      init($(this)); 

      $('.' + options.buttonsClass).click(function (e) { 
       e.preventDefault(); 
       pauseSlide(); 
       goToSlide($(this).attr('rel')); 
      }); 

      $(options.controlBt).click(function (e) { 
       e.preventDefault(); 
       if (playStatus == true) { 
        pauseSlide() 
       } else { 
        playSlide() 
       }; 
      }); 

     }); 

    }; 

    //added this 
    $.liteSlider = { 
     pause: function() { 
      alert('clicked'); 
      pauseSlide(); 
     } 
    };

來源

2013-04-16 23:29:52 Benjamin

雖然這可能會起作用，但它是一種可維護性的噩夢。當你需要在範圍外調用playSlide（），會發生什麼？並在外面聲明，但'autoplay（）'怎麼辦？雖然它可能不適用於這個問題，但它適用於其他情況，這是一種創可貼，而不是治療。 – SomeShinyObject

問題是pauseSlide的調用與聲明不在同一範圍內。

來源

2013-04-16 23:29:31

關於的jQuery插件創作，尤其是命名空間點： http://docs.jquery.com/Plugins/Authoring#Namespacing

[...]你應該收集所有的你的插件的方法，對象文本並通過傳遞給他們打電話插件的方法的字符串名稱。 [...]

(function($) { 
    var YourPluginMethods = { 
     init: function (options) { 
      return this.each(function() { 

      }); 
     }, 
     pauseSlide : function(options) { 
      return this.each(function() { 
       // Do some stuff for each instance of your plugin here 
      }); 
     } 
    }; 

    $.fn.YourPlugin = function(method) {   
     // Method calling logic 
     if (YourPluginMethods[method]) { 
      return YourPluginMethods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (!method || typeof method === 'object') { 
      return YourPluginMethods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.YourPlugin'); 
     } 
    }; 
})(jQuery); 

$('your-selector').YourPlugin('pauseSlide', { 
    speed: 'slow' 
});

一旦你已經宣佈你的方法這樣，你可以把它在任何HTML選擇。

來源

2013-04-16 23:57:04

Javascript調用函數內的函數

回答

相關問題