1

Javascript / JQueryを使用して、いくつかのHTMLボタンを動的に作成しようとしています。各ボタンをクリックすると、それぞれが異なる動作をします。

私の最初の試みは次のようになりました：

function myFunc( target_div, num_buttons ) {
    var buttons="";
    for ( var i=0; i<num_buttons; i++ ) {
        buttons += '<input type="button" id="button_'+i+'" value="button_'+i+'"></input>';
    }
    target_div.html( buttons );
    var doButtonPress = function( i ) {
        alert( i ); // I actually do something more complicated here, but it's not important now
    }
    for ( var i=0; i<num_buttons; i++ ) {
        $('#button_'+i).click( function() { doButtonPress(i); } );
    }
}

残念ながら、これは機能しません。クリックイベントが発生すると、doButtonPressには、クリックイベントが定義されたときの値ではなく、myFuncのスコープ内のiの現在の値が常に渡されるためです。したがって、doButtonPressに渡される値は、どのボタンが押されたかに関係なく、常にnum_buttonsと等しくなります。だから私は代わりにこれを試しました：

$('#button_'+i).click( new Function( "doButtonPress("+i+");" ) );

残念ながら、これも機能しません。「ReferenceError：Ca n't find variable：returnResult」というメッセージが表示されます。これは、クリックイベントが発生するまで関数コンストラクターのarg値が解析されないためだと思います。その時点で、私はすでにmyFuncのスコープ外にいるため、doButtonPressは未定義ですか？私はこれまでのところこれを正しく理解していますか？

だから...私は何をしますか？:-)

4

2 に答える 2

3

常にハンドラー内にiある変数のスコープのため、コードは機能しませんでした。num_button中にラップすることで修正できますがclosure、クラスを追加してボタンのIDを利用することで簡単にできます。

function myFunc( target_div, num_buttons ) {
    var buttons="";
    for ( var i=0; i<num_buttons; i++ ) {
        //                             added class ----------------v
        buttons += '<input type="button" id="button_'+i+'" class="mybuttons" value="button_'+i+'"></input>';
    }
    target_div.html( buttons );
    var doButtonPress = function( i ) {
        alert( i ); // I actually do something more complicated here, but it's not important now
    }

    //yes, mybuttons exist 
    $('.mybuttons').click(function () {
         doButtonPress(this.id.replace('button_', ''));
         //this.id.replace('button_', '') <- returns i value
    });
}
于 2012-11-02T16:26:50.730 に答える
1

私の提案は、data各ボタンに属性を割り当て、ボタンがクリックされたときに読み取ることができるようにすることです。これにより、不要な（そして醜い）増分id属性が不要になります。このようなもの：

function myFunc($target_div, num_buttons) {
    var buttons = [];
    for (var i = 0; i < num_buttons; i++) {
        buttons.push($('<input type="button" class="button" data-id="' + i + '" value="button ' + i + '" />'));
    }
    $target_div.append(buttons);

    var doButtonPress = function() {
        alert($(this).data('id'));
    }

    $(".button").click(doButtonPress);
}

フィドルの例

于 2012-11-02T16:30:45.203 に答える