Как узнать, СУЩЕСТВУЮТ ли HTML элементов по идентификатору и ввести другой СОДЕРЖАНИЕ - PullRequest
Новая
       98

Как узнать, СУЩЕСТВУЮТ ли HTML элементов по идентификатору и ввести другой СОДЕРЖАНИЕ

0 голосов
/ 13 июля 2020

Заранее благодарим за вашу помощь.

У меня 50 веб-страниц, и каждая страница содержит несколько элементов продуктов из следующего списка: 

<span id="supS"></span>
<span id="supM"></span>
<span id="supL"></span>
<span id="supX"></span>
<span id="lotS"></span>
<span id="lotM"></span>
<span id="lotL"></span>
<span id="lotX"></span>
<span id="marS"></span>
<span id="marM"></span>
<span id="marL"></span>
<span id="marX"></span>

Я использую эти элементы, чтобы узнать цены from <script>: 

document.getElementById("supS").innerHTML="100";
document.getElementById("supM").innerHTML="250";
document.getElementById("supL").innerHTML="400";
document.getElementById("supX").innerHTML="750";
document.getElementById("lotS").innerHTML="10";
document.getElementById("lotM").innerHTML="25";
document.getElementById("lotL").innerHTML="40";
document.getElementById("lotX").innerHTML="75";
document.getElementById("marS").innerHTML="55";
document.getElementById("marM").innerHTML="70";
document.getElementById("marL").innerHTML="85";
document.getElementById("marX").innerHTML="99";

Мне нужно использовать все идентификаторы на всех страницах, даже если у меня нет всех продуктов, но код не будет работать, если у меня нет всего, как вы понимаете .

Итак, я также использую другой список, в котором я упоминаю, какие идентификаторы должны отображаться: 

document.getElementById("supS").style.display = "none";
document.getElementById("supM").style.display = "none";
// document.getElementById("supL").style.display = "none";
// document.getElementById("supX").style.display = "none";
document.getElementById("lotS").style.display = "none";
document.getElementById("lotM").style.display = "none";
document.getElementById("lotL").style.display = "none";
// document.getElementById("lotX").style.display = "none";
document.getElementById("marS").style.display = "none";
document.getElementById("marM").style.display = "none";
// document.getElementById("marL").style.display = "none";
document.getElementById("marX").style.display = "none";

Моя цель - иметь только доступные элементы-продукты в HTML, удалите недоступные со всех страниц (что я сделаю вручную);

И использовать JavaScript на:

  1. проверьте, является ли продукт- элемент существует в HTML по идентификатору;
  2. изменить цену, если существует;
  3. если нет, то проверить другой товар из списка;
  4. изменить цену, если существует;
  5. если нет, то прекратите проверку.

Здесь мне нужна ваша помощь , чтобы создать функцию JS.

Если это возможно, пожалуйста, используйте элементы и цены, упомянутые выше в вашем примере, чтобы я мог понять, я был бы очень признателен.

Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 13 июля 2020

Я не мог понять, почему вы не создаете поля в соответствии со статусом на складе, но может быть это вам поможет: 

var arrProduct = []; // I assume you get a json like that from server side [{"ProductName": "supS", "AvailStock": 3, "Price": 2.35}, {"ProductName": "lotM", "AvailStock": 0, "Price": 0}]
    for (var i = 0; i < arrProduct.length; i++) {
        if (arrProduct[i].AvailStock > 0){
            document.getElementById(arrProduct[i].ProductName).innerHTML = arrProduct[i].Price;
        }
        else {
            document.getElementById(arrProduct[i].ProductName).style.display = "none";
        }
    }
0 голосов
/ 13 июля 2020

Просто l oop и протестируйте.

Решение, если у вас меньше интервалов, чем данных 

const data = {
  "supS": 100,
  "supM": 250,
  "supL": 400,
  "supX": 750,
  "lotS": 10,
  "lotM": 25,
  "lotL": 40,
  "lotX": 75,
  "marS": 55,
  "marM": 70,
  "marL": 85,
  "marX": 99
}
Object.entries(data).forEach(([k, v]) => {
  const span = document.getElementById(k);
  if (span) span.innerText = v;
})
<span id="supS"></span>
<span id="supM"></span>
<span id="supL"></span>
<span id="supX"></span>
<span id="marS"></span>
<span id="marM"></span>
<span id="marL"></span>
<span id="marX"></span>

Решение, если у вас больше диапазонов, чем данных: 

const data = {
  "supS": 100,
  "lotX": 75,
  "marS": 55,
  "marM": 70,
  "marL": 85,
  "marX": 99
};
[...document.querySelectorAll("span")].forEach(span => span.innerText = data[span.id] || "N/A");
<span id="supS"></span>
<span id="supM"></span>
<span id="supL"></span>
<span id="supX"></span>
<span id="marS"></span>
<span id="marM"></span>
<span id="marL"></span>
<span id="marX"></span>
...