jquery 为什么hide()和show()函数不能在循环中工作？

zpf6vheq 于 2023-10-17 发布在 jQuery

关注(0)|答案(3)|浏览(116)

我有这样一段JS代码，它遍历一个div，并为每个div触发一个aplog调用。上午通话正常。但我想在每个循环中显示和隐藏一个“进度条”。
我的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代码很好（因为当我擦除样式“display：none”时，我会看到进度条）。
我的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();
   
         
});

**$（'#waiting'）.show（）和$（'#waiting'）.hide（）**根本没有效果。控制台中没有错误消息。

在我的代码中，这些apache调用可能有什么问题？

jquery

来源：https://stackoverflow.com/questions/44206682/why-hide-and-show-functions-does-not-work-in-a-loop

3条答案

按热度按时间

qfe3c7zg1#

要驱动进度温度计，需要几个计数器和一些简单的逻辑。
下面是应该为您工作的模式类型（删除了大量代码）：

$('#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在响应到达时异步递增。

赞(0）回复(0）举报 2023-10-17

mzaanser2#

它可能是内联样式覆盖了它，为什么不在函数中设置状态呢？
您还可以使用

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

赞(0）回复(0）举报 2023-10-17

xpcnnkqh3#

你可以使用beforeSend在每次调用之前显示那个div。

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

    }
  });

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 为什么hide()和show()函数不能在循环中工作？

3条答案

相关问题

热门标签

最新问答