javascript - Jquery 在 ajax 调用后保持类

Question

首先是一些重要信息。我无法更改所使用的调用、代码、函数等中的任何内容。所以底线是我必须使用一种解决方法。

好的，我有一个包含一些字段和下拉列表的表单。 加载该表单时，我用一些 jquery 隐藏了一个特定字段。当值与数组中的某个值匹配时，该字段被隐藏。我面临的问题是，当我们使用 dropdown 时，会向外部服务(国家/地区)发出 json 调用，然后更新表单。

由于在成功调用 json 后我无法访问更新表单的代码，因此我需要找到一些东西来检查是否一切都已完成加载，如果是，则再次隐藏我的特定字段。

把事情说清楚:

<div class="checkout-shipment-methods hidden">
    <input id="EuPack" name="shipment_method" value="EuPack" type="radio">
    <label for="EuPack">Delivered at home</label>
 </div>
 <div class="checkout-shipment-methods">
    <input id="Pack" name="shipment_method" value="Pack" type="radio">
    <label for="Pack">Delivered at work</label>
 </div>      
<select id="billing_address-country" name="billing_address[country]">
   <option value="be" selected="selected">België</option>
   <option value="dk">Denemarken</option>
   <option value="de">Duitsland</option>
</select>      

input 现在隐藏了。当我更改 select 时，表单会更新并且类 hidden 会被删除。

如果我更改 select 则将进行 2 次调用 ->

所以我想检查是否进行了这些调用，如果是，则再次添加该类 hidden。

像这样:

    $(function(){

      var a = [ 'FP32PE4','FP32LE4' ];
      var b = [ 'FP32PE1','FP32PE4' ];

          $.each( a, function( key, value ) {
            var index = $.inArray( value, b );
            if( index != -1 ) {

              var $id =  $('.checkout-shipment-methods:first-of-type');
              $id.addClass('hidden');
              localStorage.setItem("selectedolditem", $id);

                  $.ajax({
                    url: "url-to-link-in-image/nl/checkout/onestep/details/",
                    beforeSend: function( xhr ) {
                        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
                    }
                  }).
                  then(function( data, textStatus, jqXHR ) {
                    console.log('success');
                       var selectedolditem = localStorage.getItem('selectedolditem');
                       if (selectedolditem != null) {
                         $('.checkout-shipment-methods:first-of-type').addClass("hidden");
                        }   

                      }, 
                      function( jqXHR, textStatus, errorThrown ) {
                         console.log('fail')

                  });
            }
        });
      });

这可能吗？

Answer 1

好的，所以您可以简单地捕获 ajaxComplete 事件，每次触发 ajax 时都会触发该事件。执行如下操作:

$( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url.indexOf( "nl/service/regions/" ) != '-1' ) {
     $('.checkout-shipment-methods:first-of-type').removeClass("hidden");
  }
});

这应该行得通，小例子:

• 我们正在监视来自网页的每个 ajax 调用
• 如果 ajax 调用地址如下:/regions ..
• 如果调用被捕获，只需在目标元素上调用 removeClass

干杯，k