JavaScript/JQUERY改进代码

JavaScript/JQUERY improve code

本文关键字：代码 JQUERY JavaScript      更新时间：2023-09-26

我得到了Js/Jquery代码，用于在悬停有色"X"时触发显示/隐藏。每个"X"都有一个不同的div和要显示的内容。我知道有一种更好的方法可以对Js/Jquery进行编码，除了重复相同的代码，但只更改每个"X"调用的div的名称。你可以在这把小提琴上看到这一点
我还使用Jqueryqtips插件来让渐变框工作

我将感谢任何关于如何更好地编写代码的建议
谢谢

下面是我所说的 Js/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);
                            });
                        });
                    });
                });
            });
        });
    });
});

首先，您应该尝试使用jquery.heverver（）方法，因为它通常在注册鼠标退出而不触发多个事件方面更可靠。

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

其次，

您只需要将代码封装在一个文档就绪函数中，而不需要几个。它将具有相同的结果

如果您将div类全部更改为.box和.trigger（而不是box2、box3、trigger2、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')。

函数和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的方法将更加高效和可靠

相关文章：