Блог

У меня есть следующий фрагмент кода (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 всегда возвращает переменную z, равную 6. Возможно ли это преодолеть? Я хочу, чтобы каждая кнопка имела свое конкретное значение z — 1,2,3 .. и т.д.

Есть идеи?

Обновленная демонстрация —http://jsfiddle.net/MUScJ/4 /

Обновленный код —

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

Вы используете строку вместо параметра 🙂 Это ваш обновленный пример.

Но попробуйте заменить onclick на jquery bind. Onclick настоятельно не рекомендуется использовать 🙂

Поскольку вы не использовали 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.

Да, измените это:

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

в это:

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

Эта проблема является результатом того факта, что вы выполняете итерацию путем увеличения z , но создаете код, который использует z (каким бы ни было значение при вызове после создания — в данном случае это 6 ) вместо того, чтобы использовать z для создания статического кода (ввод значения во время создания HTML).).

 <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();" />