如何在Blade的foreach循环中动态为li添加active类

看起来你已经搞定了静态列表的active类切换，现在要把这套逻辑搬到Blade的foreach循环里对吧？我帮你调整一下代码，解决循环里的DOM重复和事件冲突问题：

首先是优化后的Blade模板代码：

@foreach($data as $key=>$item)
    <div class="roles-menu">
        <ul class="nav" id="nav-group-{{ $key }}">
            <li class="nav-item {{ $loop->first ? 'active' : '' }}" data-item-id="{{ $item->id }}">
                <a style="cursor: pointer" class="nav-link">{{ $item->name }}</a>
            </li>
        </ul>
    </div>
@endforeach

这里做了几个关键调整： #

• 给每个ul生成唯一的ID（用$key拼接），避免循环时生成重复ID导致DOM选择器出错
• 把原来的getID函数逻辑换成了data-item-id属性，直接把item的id存在DOM元素上，更简洁也更符合规范
• 保留了$loop->first ? 'active' : ''，确保循环出来的第一个列表项默认激活

接下来是处理点击切换的JavaScript代码，把它放在页面底部或者外部JS文件里：

// 给所有列表项绑定点击事件
document.querySelectorAll('.nav-item').forEach(navItem => {
    navItem.addEventListener('click', function() {
        // 先移除当前导航组里所有已激活的项的active类
        const parentNav = this.closest('.nav');
        parentNav.querySelectorAll('.nav-item.active').forEach(activeItem => {
            activeItem.classList.remove('active');
        });
        // 给当前点击的项添加active类
        this.classList.add('active');
        
        // 如果需要使用item的ID，直接从data属性里取
        const selectedItemId = this.dataset.itemId;
        // 这里可以写你原来getID函数里的逻辑，比如发请求或者处理数据
        console.log('选中的Item ID:', selectedItemId);
    });
});

这段JS的优势： #

• 避免了原来代码里多个onclick事件嵌套导致的冲突问题，统一用事件监听的方式绑定逻辑
• 点击时只操作当前li所在的导航组（closest('.nav')），不会影响其他导航组的列表项
• 用dataset获取item ID，比原来的函数调用更直观

这样调整后，循环生成的每个列表项都能正常点击切换active类，同时默认第一个项激活，完美适配你的需求～

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