爲什麼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); 
     } 

    } 
    });