JavaScript/JQUERY改进代码

我得到了Js/Jquery代码来触发显示/隐藏悬停的彩色“X”。每个“X”都有不同的div和要显示的内容。我知道有一种更好的方式来编写Js/Jquery，其他重复相同的代码，但只是更改每个“X”所呼叫的div的名称。您可以在行动在这个fiddle
我也使用jQuery qtips插件来获得衰落箱工作

我会明白如何这更好的代码的任何建议，请参考这一点。
感谢

下面是我说的JS/jQuery的的例子约JavaScript/JQUERY改进代码

$(document).ready(function() { 
    $('.box').hide(); 
    $('.trigger').mouseover(function (event) { 
     $('.box').fadeIn(1000); 
    }); 
    $('.trigger').mouseout(function (event) { 
     $('.box').fadeOut(1000); 
    }); 
}); 

$(document).ready(function() { 
    $('.box2').hide(); 
    $('.trigger2').mouseover(function (event) { 
     $('.box2').fadeIn(1000); 
    }); 
    $('.trigger2').mouseout(function (event) { 
     $('.box2').fadeOut(1000); 
    }); 

    $(document).ready(function() { 
     $('.box3').hide(); 
     $('.trigger3').mouseover(function (event) { 
      $('.box3').fadeIn(1000); 
     }); 
     $('.trigger3').mouseout(function (event) { 
      $('.box3').fadeOut(1000); 
     }); 

     $(document).ready(function() { 
      $('.box4').hide(); 
      $('.trigger4').mouseover(function (event) { 
       $('.box4').fadeIn(1000); 
      }); 
      $('.trigger4').mouseout(function (event) { 
       $('.box4').fadeOut(1000); 
      }); 

      $(document).ready(function() { 
       $('.box5').hide(); 
       $('.trigger5').mouseover(function (event) { 
        $('.box5').fadeIn(1000); 
       }); 
       $('.trigger5').mouseout(function (event) { 
        $('.box5').fadeOut(1000); 
       }); 

       $(document).ready(function() { 
        $('.box6').hide(); 
        $('.trigger6').mouseover(function (event) { 
         $('.box6').fadeIn(1000); 
        }); 
        $('.trigger6').mouseout(function (event) { 
         $('.box6').fadeOut(1000); 
        }); 
        $(document).ready(function() { 
         $('.box7').hide(); 
         $('.trigger7').mouseover(function (event) { 
          $('.box7').fadeIn(1000); 
         }); 
         $('.trigger7').mouseout(function (event) { 
          $('.box7').fadeOut(1000); 
         }); 
         $(document).ready(function() { 
          $('.box8').hide(); 
          $('.trigger8').mouseover(function (event) { 
           $('.box8').fadeIn(1000); 
          }); 
          $('.trigger8').mouseout(function (event) { 
           $('.box8').fadeOut(1000); 
          }); 
         }); 
        }); 
       }); 
      }); 
     }); 
    }); 
});

来源

2012-03-16 rolando.pdl

我不确定stackoverflow是一个地方“请重构我的代码，它的工作原理，但不是非常模块化”！ – SpaceBison 2012-03-16 15:01:00

这可能会关闭，因为关闭主题/属于http://codereview.stackexchange.com/ – jrummell 2012-03-16 15:01:00

确实......但看到他迄今为止只赢得了11分，这意味着他可能只有1个问题没有回答。 – Kristian 2012-03-16 15:01:44

首先，你应该尝试使用jQuery .hover（）方法，因为它通常是更可靠的方面注册一个鼠标并且不发射多个事件。

http://api.jquery.com/hover/

其次，

你只需要来包装你的代码在一个文档准备功能，没有几个。这将有同样的结果

来源

2012-03-16 15:00:54 Kristian

谢谢，我意识到，我试图让这个东西更好，这就是为什么我发布的问题;） – 2012-03-16 16:15:36

如果你改变你的div类都是.box和.trigger（而不是BOX2，BOX3，触发2，trigger3等），您只需要这样：

$(document).ready(function() { 
    $('.box').hide(); 
    $('.trigger').mouseover(function(event){ 
     $(this).closest('.box').fadeIn(1000); 
    }); 
    $('.trigger').mouseout(function(event){ 
     $(this).closest('.box').fadeOut(1000); 
    }); 
});

见http://api.jquery.com/closest/

你还没有显示你的html，所以我在这里猜测。您也许可以使用$(this).parents('.box')或$(this).find('.box')。

来源

2012-03-16 15:02:29 jrummell

谢谢jrummell，有一个代码的链接，它说：“你可以看到这个动作在这个小提琴“ – 2012-03-16 16:26:03

函数和for循环如何？

function BindTrigger(index){ 
    index = (index == 0 ? '' : index); 
    $('.trigger'+ index).hover(function(){ 
     $('.box'+ index).fadeIn(1000); 
    }, function(){ 
     $('.box'+ index).fadeOut(1000); 
    }); 
} 
$(document).ready(function(){ 
    for(var i = 0; i < 8; i++) 
     BindTrigger(i); 
});

编辑：jrummell的方法会更有效和可靠。

来源

2012-03-16 15:04:03

JavaScript/JQUERY改进代码

回答

相关问题