如何在 ajax 调用或表单调用之后保留使用 Jquery 所做的 CSS 更改

Question

Im trying to hide a couple of payment options on our lightspeed Ecommerce site using Jquery during a set timeframe (Between 18.00 and 24.00) and only for people living in the Netherlands.

Since i cannot alter the file of the checkout page i use document.querySelector("#gui-checkout-shipment-methods > div:nth-child(1) > div") to then alter the css of mentioned div's "display:block" to be set as "display:none".

I tried wrapping the code in ajaxSuccess and ajaxComplete funtion, but it did not change anything.

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

It works fine, but as soon as a Ajax form radio-button is clicked, my code stops working. Inspector says: css-change-by-time.js?20190925175433:8 Uncaught TypeError: Cannot read property 'style' of null

This makes sense, since i guess after the ajax call is made, the div that used to be display:block is no longer there, and so it conflicts and throws the error.

I searched the entire day on the internet, but could not find a working solution.

So my actual question is:

How do i apply these changes and how do i make them stick, no matter what happens.

Answer 1

You first see the.html whether it is pointing right div or not. I am using jquery for this.

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

Apply style display block if it is pointing right

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

apply display none as well

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

use this for all lines.