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');
});

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

3 个答案: