Question

我想将一些动态参数传递给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.

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

Answer 1

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

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

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

Answer 2

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

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

然后：

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

Answer 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>

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

3 个答案: