如何通过脚本标签将参数传递给jquery答案

【问题标题】：How to pass parameters to jquery via script tag如何通过脚本标签将参数传递给jquery
【发布时间】：2017-09-25 14:57:30
【问题描述】：

我的代码做了什么：当我按下按钮时，它会切换 div 的类。所以我可以按下一个按钮，类从“Class”变为“SwitchToThisClass”，它具有一组不同的属性。

<script src="JS/SideNav-ShowOrHide.js"></script>

这是我的代码，如何更改它以便我可以放入参数，并且我还想使用同一个 JS 文件来更改多个类：

(function() {

  var bodyEl = $('body'),
    navToggleBtn = bodyEl.find('Class');

  navToggleBtn.on('click', function(e) {
    bodyEl.toggleClass('SwitchToThisClass');
    e.preventDefault();
  });

})();

例如，像这段带有参数且干净的代码，我希望能够使用具有不同参数的相同 JS 文件。我想切换出'Class'和'SwitchToThisClass'，取而代之的是参数。

HTML：

<script src="http://path.to/widget.js" data-width="200" data-height="200">
</script>

外部JS文件：

<script>
function getSyncScriptParams() {
         var scripts = document.getElementsByTagName('script');
         var lastScript = scripts[scripts.length-1];
         var scriptName = lastScript;
         return {
             width : scriptName.getAttribute('data-width'),
             height : scriptName.getAttribute('data-height')
         };
 }
</script>

希望这是有道理的，提前感谢您的帮助。

【问题讨论】：

这些参数是从哪里传过来的？
从 Html 文件到 JS 文件
我认为@user5328504 的意思是显示的函数似乎不接受任何参数也不需要它们，那么您要传递什么以及为什么？
@Sam 请提供更多细节，提供的细节不足以回答。
How to Ask -- 看看你提出的问题并问问自己通常会有所帮助，如果我是第一次看这个，我是否有我需要理解和回答的一切问题？

标签： javascript jquery html parameters parameter-passing

【解决方案1】：

在您的目的中，您提出的建议没有多大意义，因为有更好的方法和更易于访问，并且还允许您模块化函数和传递参数。但是，如果这是您的最终决定，您可以add custom attributes to HTML tags。

当您继续编辑您的问题时，我将继续编辑我的答案。 Solution using data HTML attribute. 和 data HTML attribute documentation.

我个人不喜欢将它用于脚本标签，我不能推荐它。为什么？因为您的源是文件而不是函数。文件没有参数（以某种方式说）。作为页面结构的“视觉”HTML 标记/元素或内容与此数据绑定更相关。除非您的意图是首先操纵标签本身。我认为永远不会。我永远不会使用它将参数传递给文件中包含的函数。我当然在这里发表我的意见。解决方案是存在的。

在您的情况下，您还面临旧浏览器的支持。

据我了解，您希望在特定的 html 文件中有一些静态值，用于传递给 JS 文件中包含的 JS 函数。

你可以做的是首先导入包含你的 JS 函数的 JS 文件：

<script src="JS/SideNav-ShowOrHide.js"></script>

我们假设您在此文件中有一个我称之为“changeFunction”的函数。您的函数需要有一些输入参数，然后您可以在文件导入后立即从 HTML 中执行。

<script>
var classFrom = "class1";
var classTo = "class2";
changeFunction(classFrom, classTo);
</script>

或直接：

<script>
changeFunction("class1","class2");
</script>

另一方面，如果您需要管理特定项目的类别，请查看如何add/remove classes from raw JS

【讨论】：