如何将动态参数传递给jquery函数答案

【问题标题】：how to pass dynamic parameters to jquery function如何将动态参数传递给jquery函数
【发布时间】：2012-02-13 02:22:52
【问题描述】：

我想将一些动态参数传递给 jquery onClick 事件。之前，我使用了这个 HTML 和 JavaScript：

<!-- HTML -->
<a id="link123" href="link1" onClick="javascript:func1(${param1},${param2});">123</a>

/* JavaScript */
func1(param1,param2) {
   // do something
}

参数param1 和param2 来自后端代码并且是动态的。我如何得到这个在这里并不重要。

使用 jQuery 后，我有了这个 HTML 和 JS：

<a href="link123">
<input type="hidden" id="param1" value="${param1}"/>
<input type="hidden" id="param2" value="${param2}"/>

$(document).ready(function() {
  $("#link123").click(function() {
    var param1 = $("#param1")[0].value;
    var param1 = $("#param1")[0].value;
    func1(param1,param2);
  });
});

func1(param1,param2) {
  //do something
}
function func1 is there as before.

我对这个解决方案不满意（将参数作为内联隐藏值传递）。在这种情况下，还有什么其他更好的方法可以将动态参数传递给 jQuery？

【问题讨论】：

${param1} 实际上是 JSTL 表达式

标签： java javascript jquery html jstl

【解决方案1】：

为此建议使用数据属性。使用：

<input data-param1="${param1}" />

然后：

$('input').click(function(){
   $(this).attr('data-param1');
});

【讨论】：

对不起，如果这是初学者愚蠢的问题。数据属性是 HTML5 标准，所以这在旧浏览器中也有效吗？
这一特殊功能一直支持到 IE 7（坦率地说，可能还有 6 个，尚未检查）。这一切都是因为 jQuery 自己做了所有的标准化问题，所以你不必担心太多。详情请见stackoverflow.com/questions/2412947/…。
@Slavic - 数据属性确实向后兼容。不知道有多落后，但肯定是 IE6，甚至可能更早。
关闭括号

【解决方案2】：

您可以像以前一样内联这些参数。

  $("#link123").click(function() {
    func1(${param1}, ${param2});
  });

也就是说，您的 PHP（或其他）使用已替换的参数值生成 javascript。

【讨论】：

在我的例子中，${param1} 是由框架从 java 代码发送到 jsp 的 JSTL 表达式。是否也可以像以前一样在 javascript 中访问此变量。 jsp文件可以读取这些变量，但是javascript文件也可以吗？
哦，我还以为是 PHP 语法。我对JSP不太熟悉。

【解决方案3】：

我假设您正在尝试将变量值从后端脚本语言传递到 Javascript？一种可能的方法是将它们直接输出到 javascript

<script language='JavaScript'>
//it's a good idea to have all those vars collected in a single object in order to not overpopulate the global scope
var scriptOutput = {
    param1 : ${param1},
    param2 : ${param1}
}
$(document).ready(function() {
    $("#link123").click(function() {
        func1(scriptOutput.param1,scriptOutput.param2);
    });
});
</script>

【讨论】：