每次我调用 livewire 操作时都会重置 javascript 函数

Question

我要做的是在单击的按钮的类上设置“活动”，然后在每个其他按钮上删除“活动”类（如果它存在），问题是每次单击按钮时那个不是活动的，它赋予属性“活动”并将其从另一个属性中删除一秒钟，然后将所有内容返回到我单击之前的状态。

我的看法：

    <ul class="nav" id="myDIV">

            <li class="nav-item active" wire:click="$emit('PaginaPrincipal')">
                <a class="nav-link" href="#" onclick="event.preventDefault();" >
                    <i class="nc-icon nc-icon nc-paper-2"></i>
                    <p>Página Principal</p>
                </a>
            </li>


            @foreach ($titulos as $titulo)

            <li class="nav-item" wire:click="ViewNiveis">
                <a class="nav-link" href="#" onclick="event.preventDefault();" >
                    <i class="nc-icon nc-icon nc-paper-2"></i>
                    <p>{{ $titulo }}</p>
                </a>
            </li>

            @endforeach

我的javascript：

var header = document.getElementById("myDIV");
    var btns = header.getElementsByClassName("nav-item");
    for (var i = 0; i < btns.length; i++)
     {
        btns[i].addEventListener("click", function()
        {
            var current = document.getElementsByClassName("active");
            current[0].className = current[0].className.replace(" active", "");
            this.className += " active";
        });
    }

经过反复试验，我发现如果我删除了 foreach 中的 livewire 操作，它会停止自行重置，有没有办法阻止它自行重置，同时仍保持我的 livewire 操作？

提前致谢。

更新：

我已经在网上尝试了其他javascript函数，看看问题是否是javascript和livewire之间的一些混淆，但它仍然会产生同样的错误。

Answer 1

在事件侦听器代码中尝试使用 btns[i] 代替它。

您也可以将之前的代码更改为 document.querySelector(‘.active’)，而不是选择具有类名的所有元素，然后使用索引 0 来选择第一个活动元素。