0

私はフランス語なので、いくつかの翻訳ミスを許してください...

Jquery と Ajax 呼び出しを使用したコードがありますが、次の問題がわかりません。

最初の行があるテーブルがあります。行の最後に、有効と削除の 2 つのオプションがあります。有効なアイコンをクリックすると、読み込みアイコンが表示され、新しい行が表示され、テーブルに追加され、読み込みアイコンが消え、削除アイコンが表示されます。

削除アイコンをクリックすると、行が削除されます。

そして、私の問題...

最初は、アイコンに "onclick=valid()" と "onclick="delete()" を直接実装していましたが、今では、よりきれいに :

$('#valid'+i).click(function(){
    valid(i);
});
$('#delete'+i).click(function(){
    delete(i);
});

そして問題が表示されます：たとえば、削除アイコンの3行目をクリックすると、4行目に表示されるのは読み込み中です...

コードがあります

PHP/HTML

<?php
    include_once 'functions_sandbox.php';
?>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.0.min.js" type="text/javascript"></script>
    </head>
    <body>
    <script type="text/javascript">
        //Fonction qui charge les datepicker et les différentes options sur les champs
        function reload_jquery(){
            $('input[type=text][id*=tags]').each(function() {
                i = $(this).attr('num');
                $(this).css('border','thin blue solid');
                $('#valid'+i).click(function(){
                    valid_temps(i);
                });
                $('#delete'+i).click(function(){
                    delete_temps(i);
                });             
            });     
        }   
        function valid_temps(i){
            $('#loading'+i).show();
            $('#valid'+i).hide();
            var variables = 'mode=saisie_temps&j='+$('#j').val();
            $.ajax(
                {
                    // Define AJAX properties.
                    type: "POST",
                    url: "/dgi/ajax_sandbox.php",
                    data : variables,
                    dataType: "html",
                    timeout: 6000,

                    // Define the succss method.
                    success: function(data)
                    {
                        $('#data_retour').append(data);
                        $('#loading'+i).hide();
                        $('#delete'+i).show();                  
                        $('#j').val(parseInt($('#j').val())+1);
                        reload_jquery();
                    }
                }
            );      
        }
        function delete_temps(i){
            $('#loading'+i).show();
            $('#delete'+i).hide();
            $( "#confirm").dialog({
                resizable: false,
                height:160,
                width: 350,
                modal: true,
                buttons: {
                    "Oui": function() {
                        supp_temps(i);
                        $(this).dialog( "close" );
                    },
                    "Non": function() {
                        $('#loading'+i).hide();
                        $('#delete'+i).show();
                        $(this).dialog( "close" );
                    }
                }
            });
        }
        function supp_temps(i){
            $('#ligne'+i).hide('slow');
        }   

    $(function(){
        reload_jquery();
    });

    </script>
    <table id="data_retour" class="module">
        <?php echo ligne_saisie_sandbox(0); ?>
    </table>
    <div style="display:none" id="confirm" title="Confirmation">Voulez-vous vraiment supprimer ce temps ?</div> 
    <label>Indice J : </label>
    <input type="text" value="1" id="j" name="j" />
</body>
</html>

「functions_sandbox.php」の「ligne_saisie_sandbox」関数

function ligne_saisie_sandbox($j){
    $retour = '
    <tr id="ligne'.$j.'">
        <td class="cellule _light">
            <label>Attraction'.$j.' : </label>
            <input type="text" id="tags'.$j.'" num="'.$j.'" />

            <img src="/dgi/img/b_save.png" alt="Valid" title="Valider votre temps" title="Valider le temps" id="valid'.$j.'" style="margin-top:5px;float:right">
            <img src="/dgi/img/b_empty.png" alt="Supprimer" title="Supprimer votre temps" title="Supprimer le temps" id="delete'.$j.'" style="margin-top:5px;float:right;display:none">
            <img src="/dgi/img/ajax_clock_small.gif" alt="Load" id="loading'.$j.'" style="margin-top:5px;float:right;display:none;" />
        </td>           
    </tr>'; 
    return $retour;
}

「ajax_sandbox.php」のAjax

include_once 'functions_sandbox.php';
switch ($_POST['mode'])
{
    case "saisie_temps":
        $j = $_POST['j'];
        $retour = ligne_saisie_sandbox($j);
        echo $retour;
    break;
}

問題を説明するための小さな画像

4

2 に答える 2

2

varこの行を省略したために問題が発生します。

i = $(this).attr('num');

off のままにして、グローバル変数を作成しました。これにより、コールバック ( ) 内のvarsがすべてlocal ではなくglobal を指すようになります。iidelete_temps(i);ii

その行を次のように変更します。

var i = $(this).attr('num');

そして、それはうまくいくはずです。また、カスタム属性を使用しないことをお勧めします。HTML5data-属性を使用します。

<input type="text" id="tags'.$j.'" data-num="'.$j.'" />

そして.data()関数を使用します：

var i = $(this).data('num');
于 2013-03-08T08:22:06.030 に答える
0

あなたが経験することは、JavaScript の一般的な問題です。締めの問題です。iこの行で呼び出される変数を暗黙的に宣言します。

i = $(this).attr('num');

暗黙的に宣言されているため、グローバルでもあります。これにより、各反復で.each()同じ変数が使用されます。

あなたの場合、それを解決する方法のオプションが必要です。JavaScript の変数には関数スコープがあり、i の値をオーバーライドすることはないため、次のように変数を明示的に宣言するだけです。

var i = $(this).attr('num');

通常、変数を明示的に宣言することをお勧めします。このように機能を開始すると、実際にはほとんどの JS エンジンでこれをチェックすることができます。

function(){
  "use strict";
  //...
}

もう 1 つのオプションは、この種の閉鎖問題に対するより一般的な解決策です。このセクションでは $('#valid'+i).click(function(){ valid_temps(i); }); $('#delete'+i).click(function(){ delete_temps(i); });

あなたはそれをに変更することができます

i = $(this).attr('num')       
(function(i){
  $('#valid'+i).click(function(){
      valid_temps(i);
  });
  $('#delete'+i).click(function(){
      delete_temps(i);
  });
})(i);

違いは、コードでは、メソッドが呼び出されるまで i が評価されず、最後の反復で i に書き込まれた値が得られることです.each()。上記のコードiでは、 in がすぐに評価されます。直面している閉鎖の問題の簡単な例として、このコードを使用できます

var i,j, arr = [];

for(i=0;i<10;i += 1){
    //creates a function that closes over i
    arr[arr.length] = function(){console.log(i);}
}
for(j=0;j<10;j += 1){
   arr[j](); //They all output 9 to the console
}

最初のループの本体を

arr[arr.length] = (function(k){function(){console.log(k);}})(i);

ほとんどの人が最初に予想する動作、つまり 0..9 がコンソールに出力されるという結果になります

あなたの特定のケースでは、単にiローカルで宣言することがおそらく 2 つのオプションの中で最も読みやすいですが、一般的に変数を閉じないようにする方法を知っておくとよいでしょう。

于 2013-03-08T08:43:26.610 に答える