Question

我的代码做了什么：当我按下按钮时，它会切换div的类。所以我可以按一个按钮，课程从＆＃34; Class＆＃34; to＆＃34; SwitchToThisClass＆＃34;它具有不同的属性集。

<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文件。我想换掉＆＃39; Class＆＃39;和＆＃39; SwitchToThisClass＆＃39;，并改为参数。

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>

希望这是有道理的，谢谢你的帮助。

Answer 1

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

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

我个人不喜欢将它用于脚本标签，我不推荐它。为什么？因为你的源文件不是函数。文件没有参数（以某种方式表示）。＆＃39;视觉＆＃39; HTML标记/元素或页面结构的东西与此数据绑定更相关。除非您的意图是在第一个实例中操纵标记本身。我认为永远不会。我永远不会用它来将参数传递给文件中包含的函数。我当然在这里发表意见。解决方案存在。

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

我理解你想要的特定html文件中有一些静态值，用于传递给JS文件中包含的JS函数。

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

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

我们假设您有一个我打电话的功能＆＃39; changeFunction＆＃39;在这个文件中。您的函数需要有一些输入参数，然后您可以在导入文件后立即从HTML中进行操作。

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

或直接：

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

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

如何通过脚本标记将参数传递给jquery

1 个答案: