Как сохранить изменения CSS, сделанные с помощью Jquery после вызова ajax или вызова формы

Question

Я пытаюсь скрыть несколько вариантов оплаты на нашем сайте электронной коммерции lightpeed, используя Jquery в течение установленного периода времени (между 18.00 и 24.00) и только для людей, живущих в Нидерландах.

Поскольку я не могу изменить файлстраницы оформления заказа я использую document.querySelector ("# gui-checkout-shipment-method> div: nth-child (1)> div"), чтобы затем изменить CSS упомянутого div "display: block" для установки в качестве "display: none ".

Я попытался обернуть код в функцию ajaxSuccess и ajaxComplete, но это ничего не изменило.

$( document ).ajaxSuccess(function () {
$.get("https://freegeoip.app/json/", function (response) {
$("#ip").html("IP: " + response.ip);
$("#country_code").html(response.country_code);
var currentTime = new Date().getHours();
  if(response.country_code=='NL' && 17 <= currentTime&&currentTime < 24){
    document.querySelector("#gui-checkout-shipment-methods > div:nth-child(1) > div").style.display = 'none';
    document.querySelector("#gui-checkout-shipment-methods > div:nth-child(2) > div").style.display = 'none';
    document.querySelector("#gui-checkout-shipment-methods > div:nth-child(3) > div").style.display = 'none';
    document.querySelector("#gui-checkout-shipment-methods > div:nth-child(4) > div").style.display = 'none';
    document.querySelector("#gui-checkout-shipment-methods > div:nth-child(5) > div").style.display = 'none';
    } 
  if(response.country_code=='NL' && 24 <= currentTime&&currentTime < 17){
    document.querySelector("#gui-checkout-shipment-methods > div:nth-child(1) > div").style.display = 'block';
    document.querySelector("#gui-checkout-shipment-methods > div:nth-child(2) > div").style.display = 'block';
    document.querySelector("#gui-checkout-shipment-methods > div:nth-child(3) > div").style.display = 'block';
    document.querySelector("#gui-checkout-shipment-methods > div:nth-child(4) > div").style.display = 'block';
    document.querySelector("#gui-checkout-shipment-methods > div:nth-child(5) > div").style.display = 'block';
    }
}, "jsonp");});

Работает нормально, но как только нажата радиокнопка формы Ajax, мой код перестает работать.Инспектор говорит: css-change-by-time.js? 20190925175433: 8 Uncaught TypeError: Невозможно прочитать свойство 'style' из null

Это имеет смысл, так как я предполагаю, что после вызова ajax, div, которыйраньше отображался: блок больше не существует, поэтому он конфликтует и выдает ошибку.

Я искал весь день в Интернете, но не смог найти работающее решение.

ИтакМой актуальный вопрос:

Как мне применить эти изменения и как заставить их придерживаться, независимо от того, что происходит.

Answer 1

Сначала вы видите .html, указывает ли он правильный div или нет.Для этого я использую jquery.

 $("#gui-checkout-shipment-methods > div:nth-child(1) > div").html()

Применить блок отображения стиля, если он направлен вправо

  $("#gui-checkout-shipment-methods > div:nth-child(1) > div").css('display','block');

применить также отображение нет

   $("#gui-checkout-shipment-methods > div:nth-child(1) > div").css('display','none');

использовать этодля всех строк.