为什么hide（）和show（）函数在循环中不起作用？

Question

我有这个js代码，它通过一个div进行迭代，并为每个触发ajax调用。 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(); 


}); 

的$（ '＃等待'）显示（）和$（ '＃等待'）隐藏（）都完全没有影响。并且在CONSOL中没有错误消息。

我怀疑我的代码中有这些ajax调用有问题。但我不明白。

感谢您的帮助。 MERCI

多米尼克

Answer 1

要驱动一个温度计，你需要一对计数器和一些简单的逻辑。

这里的分类模式的应该为你工作（庞大的代码中删除）：特别是

$('#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(); 
    } 
}); 

注：

• ajaxCalls.total在.each()循环同步递增
• ajaxCalls.complete随着响应到达而异步递增。

Answer 2

也可能是内联样式覆盖它，为什么不设置状态的功能？

您还可以使用

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

Answer 3

可以使用beforeSend显示每次调用之前股利。

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); 
     } 

    } 
    });