整理几个jq的方法

最近搞原生jq人都搞麻 记录几个项目中觉得常用的

找到dom
let audioListDom = document.querySelectorAll('. / #');

找到dom之后 循环 去监听他的点击事件
audioListDom.forEach((item,index) =. {
    item.querySelector('.pp').addEventListener('click',() => {
            xxx
    })
});
   
另外一种写法 找到dom之后 根据index 去监听他的点击事件
 $('.player__btn').eq(index).click(function() {
         xxx
 })
 
 还有一种 监听写法 也比较常用
item.addEventListener('mousedown', function(event) {
     let index = this.getAttribute('data-audio-index');
     
});

样式的赋值
$('.player__next').css("visibility","visible");
$('.player__next').css("display","inline-block");
以此类推。。。
$('.player__next').eq(index).show()
$('.player__next').eq(index).css("display", "none");
    
类名的赋值
$('.player').eq(index).hasClass('play') 增加
$('.player').eq(index).removeClass('play'); 删除

封装
let timer //全局作用域，不然会报错ReferenceError: timer is not defined

clearInterval(timer); 暂停取消定时器


timer = setInterval(function() {
        updateProgressBar(index);
}, 1000); // 每隔1秒获取一次current值

function updateProgressBar(index) {
xxx 你自己的代码  我这里是api获取参数
    let currentxx = Math.floor(amrList[index].xxx ());
    val[index].innerText = currentxx;
    slider[index].value = currentxx;
}

voiceIndex++;

jq模板
`<div class="player" data-audio-index="${voiceIndex}">
        <div class="player__bar">
     </div>
 </div>
 `
// 查找包含data-audio-index属性的元素
var elements = document.querySelectorAll('[data-audio-index]');

// 遍历元素，获取data-audio-index属性值
elements.forEach(function(element) {
  var dataAudioIndex = element.getAttribute('data-audio-index');
  console.log(dataAudioIndex);
});