Javascript 如何检查上一个元素在单击事件时是否具有活动类

考虑到下面的情况-我尝试检查

的click事件是否有任何活动类出现在其父

项上。 e、 g如果用户单击按钮5，将搜索并检查前面的

是否有活动类，在这种情况下，它将返回TRUE。同样，如果用户单击按钮2，将搜索所有以前的

，如果没有“活动”类，则返回FALSE

<ul class="list-item">
    <li><button>1</button></li>
    <li><button>2</button></li>
    <li class="active"><button>3</button></li>
    <li><button>4</button></li>
    <li><button>5</button></li>
    <li><button>6</button></li>
    <li><button>7</button></li>
</ul>

const listItem = document.querySelector('.list-item');
if(listItem){
    const alldots = document.querySelectorAll('button');
    alldots.forEach((button) => {
        button.addEventListener('click', (event) => {
            // How to check here
            // If there was 'active' class on previous 'li' items on 'click'?
            // 
            
        }, false);
    });
}

一,
二,
3
四,
五,
六,
七,

const listItem=document.querySelector（“.list item”）；
如果（列表项）{
const alldots=document.queryselectoral（'button'）；
alldots.forEach（（按钮）=>{
按钮。addEventListener（'单击'，（事件）=>{
//这里怎么查
//如果在“单击”之前的“li”项上存在“活动”类？
// 
}，假）；
});
}

您可能正在查找is或。 它们基本相同，除非parentNode是文档而不是元素，则parentElement为null

document.body.parentNode；//元素
document.body.parentElement；//元素
document.documentElement.parentNode；//文档节点
document.documentElement.parentElement；//无效的
（document.documentElement.parentNode==文档）；//真的
（document.documentElement.parentElement==文档）；

转到父级

检查类

是否处于活动状态

转到其上一个同级并重复2

重复此操作，直到您发现某个类

处于活动状态

，或者没有其他同级要检查

const listItem=document.querySelector（'.list item'）；
如果（列表项）{
const alldots=document.queryselectoral（'button'）；
alldots.forEach（（按钮）=>{
按钮。addEventListener（'单击'，（事件）=>{
让anyActive=false；
让current=event.target.parentElement；
while（当前！==null&&！anyActive）{
anyActive=anyActive | | current.matches（“.active”）；
current=current.PreviousElement同级；
}
console.log（anyActive）；
}，假）；
});
}

.active按钮{
背景颜色：绿色；
颜色：白色；
}
李{
显示：内联；
}

一,
二,
3
四,
五,
六,
七,

据我所知，此代码将帮助您：）

const listItemBtn=document.querySelectorAll（“.list item button”）；
listItemBtn.forEach（按钮=>{
按钮。addEventListener（'单击'，（事件）=>{
//如果在“单击”之前的“li”项上存在“活动”类？
const previusSibling=event.target.parentElement.previousElementSibling；
if（previussiling&&previussiling.classList.contains（'active'））{
警报（'具有活动类'）
}否则{
警报（'没有活动类'）
}
});
});

一,
二,
3
四,
五,
六,
七,