javascript - 我如何不显示价格超过的元素？？？从容器

Question

我想要隐藏价格超过 150 的每个元素的功能。我制作了从容器中制作商店物品的脚本。现在我想制作价格类别，所以 onclick 它只显示 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 {}

 }

这是我目前的尝试，但我知道这是完全错误的，我需要一点帮助，所以如果你有任何想法，我将非常感激。

标签： javascriptfunctioncontainers

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";
        }
    }
}