なぜhide（）とshow（）関数がループで動作しないのですか？

Question

divを繰り返し処理し、それぞれに対してajax呼び出しをトリガーするjsコードがあります。 ajaxコールは正常に動作しています。しかし、私は、それぞれのループの間に '進捗バー'を表示して隠したいと思っています。

私のhtmlコードは次のとおりです。

<div class="progress progress-striped active" id="waiting" style="display: none"> 
       <div style="width: 100%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-info"> 
        <span class="sr-only">40% Complete (success)</span> 
       </div> 
      </div> 

このHTMLコードは良いです（私はスタイル「表示：なし」を消去していない場合ので、私はプログレスバーを参照してください）。

私のjsのコードは次のとおりです。。

$('#btn_valider_paris').click(function() { 

    var _token = $('meta[name="_token"]').attr('content'); 
    var token_parieur = $('#token_parieur').val(); 

    // @todo : l'animation n'apparait pas , à creuser + tard. 
    $('#waiting').show(); 

    $('#div_liste_questions').children('.form-inline').each(function() { 

     // alert('id_question = '+$(this).data('id_question') + '/' + $(this).data('id_type_question') ) ; 
     var id_question = $(this).data('id_question'); 
     var id_type_question = $(this).data('id_type_question'); 
     var numeric_entier = $(this).find('.numeric_partie_entiere').val(); 
     var numeric_decimal = $(this).find('.numeric_partie_decimale').val(); 
     var text = $(this).find('.text').val(); 
     var match_score_equipe1 = $(this).find('.match_score_equipe1').val(); 
     var match_score_equipe2 = $(this).find('.match_score_equipe2').val(); 
     var liste_reponse = $(this).find('.liste_reponse').val(); 

     jQuery.ajax({ 
     url: $('#url_for_ajax').val() + '/post_enregistrer_pari_question_ajax', 
     type: 'POST', 
     dataType: 'json', 
     data: { 
       _token: _token, 
       token_parieur: token_parieur, 
       id_question: id_question, 
       id_type_question: id_type_question, 
       numeric_entier: numeric_entier, 
       numeric_decimal: numeric_decimal, 
       text: text, 
       match_score_equipe1:match_score_equipe1, 
       match_score_equipe2:match_score_equipe2, 
       liste_reponse:liste_reponse 
      }, 
     success: function (data, textStatus, xhr) { 

       if(data.code_retour === -1){ 
        toastr["error"](data.texte_retour); 
       } 

      } 
     }); 

    }); 

    $('#waiting').show(); 


}); 

$（ '＃待ち'）ショー（）と$（ '＃待ち'）非表示（）は全く効果がありません。また、エラーメッセージはコンソールに表示されません。

私はこれらのajax呼び出しで私のコードで何かが間違っていると思われます。しかし、私は何が見えないのですか？

ご協力いただきありがとうございます。メルシー

ドミニク

Answer 1

進捗温度計を駆動するために、あなたはカウンターのカップルとその周りにいくつかの簡単なロジックが必要です。

ここではあなたのために働く必要があるパターンの一種（かさばるコード削除）です：

• ajaxCalls.totalが.each()ループ
• ajaxCalls.completeに同期インクリメントされています。なお、特に

  $('#btn_valider_paris').click(function() { 
      var _token = $('meta[name="_token"]').attr('content'); 
      var token_parieur = $('#token_parieur').val(); 
      var ajaxCalls = { total:0, complete:0 }; // <<<<< initialize two counters 
      $('#div_liste_questions').children('.form-inline').each(function() { 
       // var ..., ... etc. 
       jQuery.ajax({ 
        // etc, etc. 
       }).then(function(data, textStatus, xhr) { 
        if(data.code_retour === -1) { 
         toastr.error(data.texte_retour); 
        } 
       }, function(xhr, textStatus, errorThrown) { 
        console.log(textStatus || errorThrown); 
       }).always(function() { // .always fires on both success and error. 
        ajaxCalls.complete++; // <<<<< count ajax completions asynchronously, as the responses arrive. 
        console.log(ajaxCalls.total, ajaxCalls.complete); 
        // Here, set progress thermometer to indicate that "ajaxCalls.complete of ajaxCalls.total" are complete. 
        if(ajaxCalls.complete === ajaxCalls.total) { 
         $('#waiting').hide(); // <<<<< hide #waiting when all calls are complete. 
        } 
       }); 
       ajaxCalls.total++; // <<<<< count ajax calls synchronously, as the calls are made. 
      }); 
      if(ajaxCalls.total > 0) { 
       // Here, initialise the progress thermometer to indicate that "0 of ajaxCalls.total" are complete. 
       $('#waiting').show(); 
      } else { 
       $('#waiting').hide(); 
      } 
  }); 
  

  注レスポンスが到着すると、非同期的にインクリメントされます。

Answer 2

機能の状態を設定していないなぜそれがインラインスタイルは、それをオーバーライドしていることだろうか？

また、あなたはすべての呼び出しの前にそのdiv要素を表示するためにbeforeSendを使用することができます

$('#waiting').css('display','none'); 
$('#waiting').css('display','block'); 

Answer 3

を使用することができます。

jQuery.ajax({ 
    url: $('#url_for_ajax').val() + '/post_enregistrer_pari_question_ajax', 
    type: 'POST', 
    dataType: 'json', 
    beforeSend: function(xhr) { 
    $('#waiting').show(); 
    } 
    data: { 
    _token: _token, 
    token_parieur: token_parieur, 
    id_question: id_question, 
    id_type_question: id_type_question, 
    numeric_entier: numeric_entier, 
    numeric_decimal: numeric_decimal, 
    text: text, 
    match_score_equipe1:match_score_equipe1, 
    match_score_equipe2:match_score_equipe2, 
    liste_reponse:liste_reponse 
    }, 
    success: function (data, textStatus, xhr) { 

     if(data.code_retour === -1){ 
     toastr["error"](data.texte_retour); 
     } 

    } 
    });