JS 产品过滤器/输出所有产品答案

【问题标题】：JS Product Filter / outputs all ProductJS 产品过滤器/输出所有产品
【发布时间】：2022-11-02 21:14:39
【问题描述】：

当您在输入数字中输入数字时，会与产品的属性进行比较，数字少则显示一个产品，如果多则显示另一个。我的代码可以一次向我显示所有产品，如果一个产品较小，我如何隐藏一个产品并显示另一个？ ///////////////////////////////////////// //////////////////////////////////////

const number = document.querySelector("#tentacles");
const btn = document.querySelector('.sort')
const card = document.querySelectorAll('.first_card')
const els = [...document.querySelectorAll('[data-prise]')];
btn.addEventListener('click', () => { 
    let f1 = number.value;
    const prices = els.map(el => Number(el.dataset.prise));
        let filterResult = prices.filter(function(item) {
            return (item > f1)
        })
        console.log(filterResult)
    card.forEach( item => {
        if (filterResult > f1) {
            item.style.opacity = 1;
        } else {
            item.style.opacity = 0;
        }
    })
})

<body>
    <div class="field">
        <div class="number-content">
            <label>price</label>
            <input type="number" id="tentacles" min="0" max="38000" value="1000">
            <button class="sort">Sort!</button>
        </div>
    </div>
    <div class="card">
        <!-- 1 card -->
        <div class="first_card" >
            <div class="img_card">
                <img src="1.png" alt="machine">
            </div>
            <div class="text_card">
                <div class="desc">
                    Foxxx Kitsune Mini Black <br> Vintage RCA
                </div>
                <div class="price" data-prise="6000">
                    6000
                </div>
            </div>
        </div>
        <!-- 2 card -->
        <div class="first_card">
            <div class="img_card">
                <img src="1.png" alt="machine">
            </div>
            <div class="text_card">
                <div class="desc">
                    Foxxx Kitsune Mini Black <br> Vintage RCA
                </div>
                <div class="price" data-prise="7000">
                    7000
                </div>
            </div>
        </div>
        <!-- 3 card -->
        <div class="first_card">
            <div class="img_card">
                <img src="1.png" alt="machine">
            </div>
            <div class="text_card">
                <div class="desc">
                    Foxxx Kitsune Mini Black <br> Vintage RCA
                </div>
                <div class="price" data-prise="4000">
                    4000
                </div>
            </div>
        </div>
        <!-- 4 card -->
        <div class="first_card">
            <div class="img_card">
                <img src="1.png" alt="machine">
            </div>
            <div class="text_card">
                <div class="desc">
                    Foxxx Kitsune Mini Black <br> Vintage RCA
                </div>
                <div class="price" data-prise="3000">
                    3000
                </div>
            </div>
        </div>
        <!-- 5 card -->
        <div class="first_card">
            <div class="img_card">
                <img src="1.png" alt="machine">
            </div>
            <div class="text_card">
                <div class="desc">
                    Foxxx Kitsune Mini Black <br> Vintage RCA
                </div>
                <div class="price" data-prise="2000">
                    2000
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

【问题讨论】：

"数量较少，则显示一种产品，如果更多，则显示另一种产品。“少于/多于什么？
我在 input type="number 中输入数字如果此字段中的数字大于 <div class="price" data-prise="6000"> 中指定的数字，则如果小于另一个则输出一个产品

标签： javascript

【解决方案1】：

filterResult 是一个数组（数组过滤器的结果），因此您必须将它与数组方法一起使用，例如some。

if (filterResult.some(n=> n > f1))
// true if at least one of the prices in filterResult is greater than f1

【讨论】：