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

I want to pass some dynamic paramters to jquery onClick event. Before, I used this HTML and JavaScript:

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

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

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

The parameters param1 and param2 come from backend code and are dynamic. How I get this is not important here.

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

After using jQuery, I have this HTML and JS:

使用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.

I'm not happy with this solution (passing params as inline hidden values). What are other, better ways to pass dynamic parameters to jQuery, in situation like this?

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

3 个解决方案

#1

Data attributes are advised for this purpose. Use:

建议使用数据属性。使用:

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

And then:

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

#2

You could inline those parameters like you did before.

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

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

That is, your PHP (or whatever) generates javascript with already substituted param values.

也就是说,您的PHP(或其他)生成具有已替换的参数值的javascript。

#3

I assume you are trying to pass variable values from backend scripting language to Javascript? One possible way is to output them directly to the javascript

我假设您正在尝试将变量值从后端脚本语言传递给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>

#1