javascript - jQuery如何循环添加事件【遍历？】

问题描述

问 题

$('.box1').mouseover(function () {
        $('.box1 .prev').css('display', 'block');
        $('.box1 .next').css('display', 'block');
    }).mouseout(function () {
        $('.box1 .next').css('display', 'none');
        $('.box1 .prev').css('display', 'none');
    });

如上代码所示，想要给box1,box2,box3,box4
4个目标添加事件，除了复制改名还有什么办法。
for循环不能用。

for (var i = 1 ; i < 5 ; i ++) {
        $('.box' + i).mouseover(function () {
            $('.box' + i + ' .prev').css('display', 'block');
            $('.box' + i + ' .next').css('display', 'block');
        }).mouseout(function () {
            $('.box' + i + ' .next').css('display', 'none');
            $('.box' + i + ' .prev').css('display', 'none');
        });
    }

是我写错了吗

解决方案

闭包问题。

for (var i = 1 ; i < 5 ; i ++) {
  (function(i){
    $('.box' + i).mouseover(function () {
      $('.box' + i + ' .prev').css('display', 'block');
      $('.box' + i + ' .next').css('display', 'block');
    }).mouseout(function () {
      $('.box' + i + ' .next').css('display', 'none');
      $('.box' + i + ' .prev').css('display', 'none');
    })
  })(i)
}

…… 把var改成let也行。

这篇关于javascript - jQuery如何循环添加事件【遍历？】的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！