为何详情按钮的事件监听器需第二次点击才触发？求解决方案

问题描述 #

需实现详情按钮的切换功能：首次点击显示详情，再次点击隐藏详情。但当前按钮仅在第二次点击后才能正常工作。

相关代码 #

HTML 结构 #

<div class='container'>
    <a class='back-link' href="{% url 'supplyshop:catalog'  %}"> Back to Catalog</a>
    <h1 class='cart-h1'>Cart </h1>
    <div class='cart'>
        <div class='cart-items'>
            <div class='cartItem' id='cartDiv'>
                <div class='cart' id='cart-item'>
                    <img class='img' src='https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png' alt='request image'>
                    <div class='cart-info'>
            
                        <p class='name'>Anti-Bacterial Hand Gel (Gallon) </p>

                        <div class='cart-details'>
                            <button class='detailsBtn'><i class="fa-regular fa-circle-info"></i></button>
                            <p id='detailsText'></p>
                        </div>

                        <p class='qty-text'>Qty</p>
                        
                        
                        <div class='qty-container'>
                    
                        </br>
                        <input type='button' value='+' class='qty qtyplus' id='plus' field='quantity' />
                        <input type='text' name='quantity' value='1' class='qty' id='inputQty' />
                        <input type='button' value='-' class='qty qtyminus' id='minus' field='quantity' /> 
                        
                        <button class='deleteBtn' id='deleteBtn' type='button'>Delete <i class="fa-solid fa-trash-can"></i></button> 
                            
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</div>

JavaScript 逻辑 #

const detailsBtn = document.querySelector(".detailsBtn");
const detailsText = document.querySelector("#detailsText");

detailsBtn.onclick = function toggleDetails(event) {

    if (detailsText.style.display == 'none') {
        // show details
        detailsText.style.display = 'block'

        let details = 'Large Jug'
        detailsText.textContent = details

    } else {
        // hide details
        detailsText.style.display = 'none'
    }
}

成因分析 #

初始状态下，detailsText的style.display属性为空值（未通过HTML或CSS设置初始显示状态）。首次点击按钮时，判断条件detailsText.style.display == 'none'不成立，直接进入else分支将display设为none，用户看不到任何变化；第二次点击时，display值为none，才会触发显示逻辑，因此看起来首次点击无效。

修复建议 #

方案1：设置初始CSS隐藏状态 #

给detailsText添加初始的CSS样式，让它默认隐藏：

#detailsText {
    display: none;
}

原JavaScript逻辑无需修改，首次点击时条件成立，会切换为显示状态。

方案2：修改判断逻辑兼容空值 #

调整JavaScript的判断条件，涵盖初始空值的情况：

const detailsBtn = document.querySelector(".detailsBtn");
const detailsText = document.querySelector("#detailsText");

detailsBtn.onclick = function toggleDetails(event) {
    // 包含初始空值的情况，判断元素是否处于隐藏状态
    const isHidden = detailsText.style.display === 'none' || detailsText.style.display === '';
    if (isHidden) {
        detailsText.style.display = 'block';
        detailsText.textContent = 'Large Jug';
    } else {
        detailsText.style.display = 'none';
    }
}

方案3：使用类切换控制显示隐藏（推荐） #

通过CSS类来管理显示状态，更易维护：

1. 添加CSS类：

.hidden {
    display: none;
}

2. 修改HTML，给detailsText添加初始hidden类：

<p id='detailsText' class='hidden'></p>

3. 简化JavaScript逻辑：

const detailsBtn = document.querySelector(".detailsBtn");
const detailsText = document.querySelector("#detailsText");

detailsBtn.onclick = function toggleDetails(event) {
    detailsText.classList.toggle('hidden');
    // 仅在显示时设置文本，避免重复操作
    if (!detailsText.classList.contains('hidden')) {
        detailsText.textContent = 'Large Jug';
    }
}

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