如何实现脚本检测item__sizes子元素数量并设置item__checker宽度

原代码存在的问题 #

• document.getElementsByClassName('.item__sizes') 语法错误：getElementsByClassName 的参数是类名本身，不需要加前缀 .，且该方法返回的是HTMLCollection集合，不能直接调用 childElementCount
• 统计逻辑错误：childElementCount 会把 item__checker 也计入子元素总数，不符合需求中统计尺寸按钮数量的实际意图
• 未处理多个 item__sizes 元素的情况：原代码只处理了第一个匹配的元素，不符合“找到所有class为item__sizes的元素”的要求

修正后的代码 #

HTML (PHP) 保持不变 #

<?php if ($product_attributes): ?>
    <div id="item__sizes" class="item__sizes">
        <?php $is_first_item = true; ?>
        <?php foreach ($product_attributes as $attribute): ?>
            <?php
            $attribute_active_class = $is_first_item ? ' active' : '';
            ?>
            <button class="item__size js-item__sizes_btn js-btn-product-attribute<?php echo $attribute_active_class; ?>"
                data-product-attribute-price="<?php echo $attribute['price']; ?>"
                data-product-attribute-value="<?php echo $attribute['name']; ?>" type="button"><?php echo $attribute['name']; ?></button>
            <?php
            $is_first_item = false;
        endforeach;
        ?>
        <div class="item__checker"></div>
    </div>
<?php endif; ?>

修正后的JavaScript #

const checkWidth = () => {
  // 获取所有class为item__sizes的元素
  const sizeContainers = document.getElementsByClassName('item__sizes');
  
  // 遍历每个容器
  for (const container of sizeContainers) {
    // 统计容器内的按钮数量（排除item__checker）
    const buttonCount = container.querySelectorAll('.item__size').length;
    // 获取当前容器对应的item__checker
    const checker = container.querySelector('.item__checker');
    
    if (!checker) continue; // 避免找不到checker时出错
    
    // 根据按钮数量设置宽度
    if (buttonCount === 2) {
      checker.style.width = '50%';
    } else if (buttonCount === 1) {
      checker.style.width = '100%';
    }
  }
};

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', checkWidth);
// 如果是动态加载的内容，记得在内容加载完成后再次调用checkWidth()

关键说明 #

• 遍历所有 item__sizes 容器，确保每个元素都被处理
• 使用 querySelectorAll('.item__size') 精准统计尺寸按钮的数量，避免把 item__checker 计入统计
• 通过 container.querySelector('.item__checker') 获取当前容器对应的检查器元素，确保对应关系正确
• 增加 DOMContentLoaded 事件监听，确保DOM加载完成后再执行脚本，避免元素未找到的问题
• 增加容错处理：如果找不到 item__checker，跳过当前容器的处理

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