Скрыть элементы Mutliple на основе Geo IP - PullRequest
Новая
       20

Скрыть элементы Mutliple на основе Geo IP

2 голосов
/ 25 апреля 2019

Я внедряю инструмент для отображения скрытых элементов (цен на товары) для пользователей в разных странах.Например, пользователи из Великобритании будут видеть разные цены для пользователей из США.

Я реализовал решение из этого вопроса

Однако это работает только для первого экземплярацелевой заголовок, в котором отображается цена.

Я знаю, что каждый идентификатор должен быть уникальным, но я не знаю, как это сделать без дублирования кода JQuery для каждого продукта, есть ли эффективный метод, который может мне помочь?

    $.get("http://freegeoip.app/json/", function (response) {
      $("#ip").html("IP: " + response.ip);
                          

    $("#country_code").html(response.country_code);
                          

    if(response.country_code=='GB'||response.country_code=='US'){
                            

    document.getElementById(response.country_code).style.display = "block";
    }
    }, "jsonp");
    #US { 
      text-align: left; 
      color: black; 
      display:none;
    }
 
    #GB { 
      text-align: left; 
      color: black; 
      display:none;
    } 
    
    
    #ip{
      display:none;
      color:white;
    }

    #country_code{
      display:none;
      color:white;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ip">Loading...</div>
    <div id="country_code"></div>
    <div id="GB"><h4 class="h4black">£69.99</h4></div>
    <div id="US"><h4 class="h4black">$89.95</h4></div>

1 Ответ

1 голос
/ 25 апреля 2019

Чтобы ваша jQuery работала с подходом на основе class, рассмотренным ниже, поменяйте местами эту строку: 

document.getElementById(response.country_code).style.display = "block";

С этим: 

$(`.${response.country_code}`).show();

Если вы не можете использовать ES6 (или более новый стандарт) и, следовательно, литералы шаблона , вы можете использовать более старый синтаксис: 

$('.' + response.country_code).show();

Несколько баллов ...

  1. Используйте class для элементов HTML с кодами стран, а не id. Это позволит вам раскрыть сразу несколько элементов.
  2. Поскольку вы используете jQuery, вы также можете использовать встроенные функции, которые он предлагает для DOM поиска.

Вот пример, демонстрирующий эти моменты: 

$(".US").show();
.US,
.GB {
  text-align: left;
  color: black;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="GB">
  <h4 class="h4black">£69.99</h4>
</div>
<div class="US">
  <h4 class="h4black">$89.95</h4>
</div>
<div class="US">
  <h4 class="h4black">$89.95</h4>
</div>

jsFiddle

...