萌新！Jquery实现选项卡，我这样写为什么不行大佬们有什么好的建议？

Question

点击按钮切换文本我想循环给li绑定点击事件，然后将文本放在数组中，点击时，替换成和li对应下标的文本相关代码//请把代码文本粘贴到下方（请勿用图片代替代码）Document*{margin:0;padding:0;}.box{width:400px;height:200px;margin:100pxauto;border-top:none;}.btn{overflow:hidden;display:flex;}.btnli{/*float:left;*/list-style:none;flex:1;text-align:center;height:50px;line-height:50px;border:1pxsolid#000;border-right:none;}li:last-child{border-right:1pxsolid#000;}.content{height:200px;padding:10px;border:1pxsolid#000;border-top:none;}按钮a按钮b按钮c我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是谁点击我vartextArr=["我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字","我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字","我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字"]//使用JQUery方法var$lis=$('li')for(leti=0;i

Answer 1

既然你都用了jq就没必要这样。
//伪代码如下
var$li=$('li'),$text=$('.text');
$li.on('click',function(){
$text.text(textArr[$(this).index()]);
});
                            

Answer 2

用each()方法，
let$lis=$('li');
$lis.each(function(index,value){
$lis.eq(index).click(function(){
console.log('哈哈哈');
$('.text').text(textArr[index]);
})
})
你的思路没问题，但是for是直接执行的：$lis[i]没有绑定到对应元素
let$lis=$('li');
for(leti=0;iconsole.log($lis[i]);
$lis.eq(i).click(function(){
console.log('哈哈哈');
$('.text').text(textArr[i]);
})
}
这样子可以达到效果
let$lis=$('li');
functionchangeText(e){
console.log('哈哈哈');
$('.text').text(textArr[e]);
}
for(leti=0;iconsole.log($lis[i]);
$lis.eq(i).attr("onclick",'changeText('+i+')');
}