Question

我得到了Js / Jquery代码，用于在悬停彩色“X”时触发显示/隐藏。每个“X”都有不同的div和内容来显示。我知道有一种更好的方法来编写Js / Jquery，重复相同的代码但只是改变每个“X”所要求的div的名称。您可以在此fiddle中看到这一点我也使用Jquery qtips 插件让淡入淡出的盒子工作了

我将很感激有关如何更好地编码的建议。
谢谢

下面是我正在谈论的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);
                            });
                        });
                    });
                });
            });
        });
    });
});

Answer 1

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

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

其次，

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

Answer 2

如果你将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')。

Answer 3

函数和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的方法将更有效，更可靠。

JavaScript / JQUERY改进了代码

3 个答案: