如何通过从html传递变量以调用下面的.js文件来调用document.ready内部的外部.js文件

Question

我正在尝试修改在线找到的功能。 它在document.ready函数内部，如果我尝试使用函数

functionName(variable1,... variableN){}  

的

$(document).ready(function(){}

它失败。 该代码本身可以工作，但是我想传递变量来做更多的事情。 这是代码，我想传递变量。 任何帮助将不胜感激

$(document).ready(function(){
  $(".content-slider").slider({
    animate: true,
    change: handleSliderChange,
    slide: handleSliderSlide
  });
});

function handleSliderChange(e, ui)
{
  var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
  $("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui)
{
  var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
  $("#content-scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
}

上面的所有功能都在一个.js文件中，我需要从html调用它。 目前，我在html中这样称呼它：

<script src="slider_test.js" language="javascript" type="text/javascript">

但是那样我不能输入变量

Answer 1

您可以将变量放在全局范围内：

var theExtraThingINeed;

$(document).ready(function(){
  theExtraThingINeed = "someValue";

  $(".content-slider").slider({
    animate: true,
    change: handleSliderChange,
    slide: handleSliderSlide
  });
});

function handleSliderChange(e, ui)
{
  alert(theExtraThingINeed);

  var getHtmlStuff = $("#yourHtmlId").val();
}

Answer 2

这是因为文档准备就绪的字面意思是：“等待文档准备就绪”。 由于您需要文档中的HTML来执行这些操作。 您可以准备在文档内部进行函数调用，您可能会很好。

Answer 3

好的，我的建议是编写一个处理这些内容的对象。 可以执行全局功能，但是我不认为这是一个好习惯。

var plugins = {};
plugins.slider = function sliderPlugin(selector) {
   var $el = $(selector);

   $el.slider({
     change: function sliderChange(e, ui) {
       var maxScroll = $el.attr("scrollWidth") - $el.width();
       $el.attr({scrollLeft: ui.value * (maxScroll / 100) });
     },
     slide: function sliderSlide(selector, ui) {
       var maxScroll = $el.attr("scrollWidth") - $el.width();
       $el.attr({scrollLeft: ui.value * (maxScroll / 100) });
     }
   })
};

另外，由于其功能相同，因此最好重构一下：

var plugins = {};
plugins.slider = function sliderPlugin(selector) {
   var $el = $(selector),
       handleSlider = function handleSlider(e, ui) {
           var maxScroll = $el.attr("scrollWidth") - $el.width();
           $el.attr({scrollLeft: ui.value * (maxScroll / 100) });
       };

   $el.slider({
     change: handleSlider,
     slide: handleSlider
   })
};

并这样称呼它：

$(document).ready(function(){
    plugins.slider('#content-slider');
    plugins.slider('.otherElement');
});