lh12565
2019-05-10 14:30
采纳率: 33.3%
浏览 1.2k
已采纳

多个id进行hover事件问题

我想实现鼠标移动到相应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,望哥哥们帮助,谢谢!

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 听楼一夜雨 2019-05-10 15:11
    已采纳
    <!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>
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • zt13502162671 2019-05-15 10:29
       b = arr[i].substr(1);//应该是b
       b = ".bar-" + b;//应该是.bar-b
    

    这段你输出下b,
    然后jq找到对应的类,看代码里面只有

    <div class=".bar-b">这个会变,
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题