JS仅输出首个data-prise属性值问题排查求助

• document.querySelector('.price')只会返回第一个匹配到的DOM元素，所以你定义的price变量只存了第一个卡片的data-prise值，循环里反复输出的都是这个固定值。
• 循环条件写了i < 6，但你实际只有5个卡片，不过这不是核心问题，关键是没拿到所有目标元素。

const btn = document.querySelector('.sort')
// 获取所有带.price类的元素
const priceElements = document.querySelectorAll('.price');

btn.addEventListener('click', () => { 
    // 遍历每个价格元素，输出对应的data-prise值
    priceElements.forEach(element => {
        // 两种获取属性值的方式二选一即可
        const price = element.getAttribute('data-prise');
        // 或者用dataset语法：const price = element.dataset.prise;
        console.log(price);
    });
})

• document.querySelectorAll()会返回包含所有匹配元素的NodeList，用forEach()遍历比手动写for循环更简洁。
• 用dataset访问data-*属性是更规范的写法，比如data-prise直接对应element.dataset.prise。

内容的提问来源于stack exchange，提问作者al.orl