Как мне не отображать элемент с ценой выше ??? из контейнера

Question

Мне бы хотелось, чтобы функция скрывала каждый элемент с ценой выше 150. Я сделал скрипт, который делает товар в магазине из контейнера. теперь я хочу сделать категорию цен так, чтобы она щелкала, например, отображает только элементы под 150.

  var ItemCollection =

[
    {

        Name: 'IVY PA',
        Price: 160,
        Picture: 'some pic'
    },
    {

        Name: 'IVY P',
        Price: 100,
        Picture: 'some pic'
    }, 

  ];

 ItemCollection.forEach(generateItem);
$('#Collection').append(content);


 var content = "";






 function generateItem(item, index, arrays) {


content = content + '\n' +
    '        <li class="Shoe"><a href="#' + item.Name + '\'">\n' +
    '            <div>\n' +
    '                <img class="ItemPicture"\n' +
    '                     src=" ' + item.Picture + '">\n' +
    '\n' +
    '            </div>\n' +
    '            <div class="ItemInfo">\n' +
    '                <p>' + item.Name + '</p>\n' +
    '                <p>' + item.Price + '$</p>\n' +
    '            </div>\n' +
    '            </a>\n' +
    '        </li>\n';


 }


 function under150() {
   var price = "";




var Shoe = document.getElementsByClassName("Shoe");


  price = ItemCollection.item.Price;
 console.log(ItemCollection.item.Price);


if (price > 150){

    Shoe.style.display = "none";

}
else {}

 }

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

Answer 1

Выполните итерацию для каждого элемента, а затем проверьте цену, если цена превышает 150, то скройте этот конкретный элемент.

function under150() {
    var Shoe = document.getElementsByClassName("Shoe");
    for(var i=0;i<Shoe.length;i++)
    {
        price = ItemCollection[i].Price;
        if (price > 150){
            Shoe[i].style.display = "none";
        }
    }
}