如何调用 Document.ready 内部的外部.js，方法是从 HTML 传入变量来调用下面的.js文件

how to call external .js which is inside document.ready by passing in variables from html to call the .js file below

本文关键字：调用 js HTML 变量 文件 方法 ready Document 内部 何调用 外部      更新时间：2023-09-26

我正在尝试修改我在网上找到的功能。 它在 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">

但这样我就无法输入变量

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

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

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

好的，我的建议是编写一个处理这些东西的对象。可以执行全局函数，但我认为这不是一个好的做法。

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');
});
相关文章：