如何在data-discount属性值为0时隐藏.discounts元素？

修改你的JavaScript代码，在点击事件中添加判断逻辑，当折扣值为0时隐藏对应的.discounts元素，非0时恢复显示：

var discounters = document.querySelectorAll(".discount__Topics");

discounters.forEach((index) => {
    var buttons = index.querySelectorAll(".form-button");
    // 提前获取当前模块的discounts元素，减少重复DOM查询
    const discountsEl = index.querySelector('.discounts');

    buttons.forEach(function (item) {
        item.addEventListener('click', function(){
            var discount = getDiscount(this);
            let span = index.querySelector('.discount-amount')
            span.innerHTML = '<strong>' + discount+ '</strong>';
            
            // 根据折扣值控制显示状态
            if (discount === "0") {
                discountsEl.style.display = 'none';
            } else {
                discountsEl.style.display = 'inline-flex';
            }
        });
    });

    function getDiscount(clicked_element) {
        var val = clicked_element.getAttribute("data-discount");
        return val;
    }
});

关键改动说明 #

• 提前在模块遍历阶段获取当前模块的.discounts元素，避免每次点击重复查询DOM，提升性能
• 增加判断逻辑：
  • 因为getAttribute返回的是字符串类型，所以直接判断discount是否等于"0"，满足则隐藏元素
  • 当折扣值非0时，恢复元素默认的inline-flex显示方式，避免之前隐藏后无法再次显示

完整代码示例 #

HTML

<div class="discount__Topics">
<div class="discounts"><strong class="discount-amount">38</strong>%</div>

<div class="offers">
  <button class="form-button" data-discount="38">Offer 1</button>
  <button class="form-button" data-discount="0">Offer 2</button>
  <button class="form-button" data-discount="22">Offer 3</button>
  <button class="form-button" data-discount="88">Offer 4</button>
</div>
</div>

<div class="discount__Topics">
<div class="discounts"><strong class="discount-amount">12</strong>%</div>

<div class="offers">
  <button class="form-button" data-discount="12">Offer 1</button>
  <button class="form-button" data-discount="32">Offer 2</button>
  <button class="form-button" data-discount="0">Offer 3</button>
  <button class="form-button" data-discount="55">Offer 4</button>
</div>
</div>

CSS

.discount__Topics {
margin-bottom:20px;
}

.discounts {
background-color: red;
color: white;
display: inline-flex;
margin-bottom:5px;
}

内容的提问来源于stack exchange，提问作者kyllaz