Question

我有以下代码（html，js，jquery）代码段（http://jsfiddle.net/MUScJ/2/）：

<script type="text/javascript">
    function someFunc(){
    html = '';
    z = 1;
    for(i=0; i<5; i++){
        html += '<input type="button" value="Button_'+z+'"' +
                'onclick="otherFunc(z);">';
         z++;
    }

    $("#container").html(html);

   return true;
}

function otherFunc(z){
    alert('z:' + z);

     return true;   
}

</script>   

<div id="container"></div>
<input type="button" value="Go" onclick="someFunc();" />

此脚本使用onclick事件输出五个按钮。 JS函数otherFunc总是返回等于6的z变量。是否有可能克服这个问题？我希望每个按钮都有其特定的z值 - 1,2,3 ..等等。

有什么想法吗？

Answer 1

更新了演示 - http://jsfiddle.net/MUScJ/4/

更新代码 -

    html += '<input type="button" value="Button_'+z+'"' +
            'onclick="otherFunc('+z+');">';

Answer 2

你正在使用字符串而不是param :) 这是您更新的example。

但是尝试用jquery bind替换onclick。强烈建议不要使用Onclick：）

Answer 3

由于您未使用var，因此您的z变量是全局的。出于多种原因，这是坏消息。但在您的情况下，您的onclick正在调用otherFunc(z)，其中z是全局z，其最终值为6.

一种可能的解决方法是更改您生成的html：

var z = 1;
var html = '';
for(var i=0; i<5; i++){
    html += '<input type="button" value="Button_'+z+'"' +
            'onclick="otherFunc(' + z + ');">';
     z++;
}

这是解决它的最简单方法，但是你并没有真正利用jQuery给你的力量。

Answer 4

是的，改变一下：

html += '<input type="button" value="Button_'+z+'"' +
    'onclick="otherFunc(z);">';

进入这个：

html += '<input type="button" value="Button_' + z + '"' +
    'onclick="otherFunc(' + z + ');">';

这个问题是你通过递增z来迭代的结果，但创建了使用z的代码（无论创建后调用的值是什么 - 在这种情况下它是{{1}而不是使用6来创建静态代码（在HTML创建时输入值）。

Answer 5

<script type="text/javascript">
function someFunc(){
    html = '';
    z = 1;
    for(i=0; i<5; i++){
        html += '<input type="button" value="Button_'+z+'"' +
                'onclick="otherFunc(z);">';
         z++;
    }

    $("#container").html(html);

   return true;
}


function otherFunc(z) {
    return function() {
        alert('z:' + z);
    };
}

</script>    

<div id="container"></div>
<input type="button" value="Go" onclick="someFunc();" />

JavaScript动态参数

5 个答案: