消息关闭
    暂无新消息!
$('.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');
        });
    }

是我写错了吗


6个回答

︿ 3

不用循环添加事件,你写个方法;直接把需要的事件的元素作为参数传进去,直接调用就行了。不是更简单;性能更高。或者用事件委托的方法更好。

︿ 1

闭包问题。

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也行。

︿ 1
$('.box').mouseover(function () {
        $(this).find('.prev').css('display', 'block');
        $(this).find('.next').css('display', 'block');
    }).mouseout(function () {
        $(this).find('.next').css('display', 'none');
        $(this).find('.prev').css('display', 'none');
    });