我想实现鼠标移动到相应id/class的div字体高亮和变大小，需要变大小的class名是相应高亮的id名加上字符串'bar',比如：
高亮的id名为a，则相应的变大小class名为bar-a
代码：
<div id="a">aaa</div>
<div id="b">bbb</div>
.....
<div class="bar-a">32</div>
<div class="bar-b">22</div>
....
<script>
var arr=["#a","#b",....]
var b="";
for (var i in arr) {
$(arr[i]).hover(
function () {
//mouseover
$(this).css({"opacity": "1"});
b = arr[i].substr(1);
b = ".bar-" + b;
$(b).css({"font-size": "20px"});
}, function () {
//mouseout
$(this).css({"opacity": "0"});
b = arr[i].substr(1);
b = ".bar-" + b;
$(b).css({"font-size": "14px"})
})
}
</script>
我想问的是，上面的高亮能正常显示，但是变大小的仅数组最后一个元素的class相应div会变，其他都不会，不知道错在哪了。每接触多久js，望哥哥们帮助，谢谢！
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
.on{opacity:1;color:red}
.active{font-size:20px;}
</style>
<div class="a" id="a">aaa</div>
<div class="a" id="b">bbb</div>
.....
<div class="bar-a">32</div>
<div class="bar-b">22</div>
....
<script>
$(".a").hover(
function () {
//mouseover
var obj=$(this).attr("id");
$(this).addClass("on");
$(".bar-"+obj).addClass("active");
}, function () {
//mouseout
$(this).removeClass("on");
var obj=$(this).attr("id");
$(".bar-"+obj).removeClass("active");
})
</script>
</html>
b = arr[i].substr(1);//应该是b
b = ".bar-" + b;//应该是.bar-b
这段你输出下b，
然后jq找到对应的类，看代码里面只有
<div class=".bar-b">这个会变，