0

我有一张包含红点的世界地图，当您将鼠标悬停在这些点上时，会显示一个国家列表（可能是 1 个或多个）列表中的所有项目都是指向库存页面上某个部分的链接。

我只是在学习 jquery，所以我面临一些问题，也许有人可以帮助我：

  1. 我需要国家列表根据高度或国家行自动调整大小
  2. 一次应该只显示一个列表。
  3. 一旦我将鼠标悬停在一个点上并显示国家/地区，然后将鼠标移出它就无法再次工作，直到我刷新页面
  4. 我的 jquery 代码有意义吗，有没有更好的方法？

这是 html 部分中大多数 div 的样子：

 <div id="austDiv32">
 <img class="dot5" src="../images/dot.png" alt="Austria" style="margin: 80px 0 0 450px;" />
 <div id="Div32" class="theDiv" style="margin: 20px 0 0 460px;">
 <a href="availability.aspx?region=Austria" class="style1">Austria/a> 
 <a href="availability.aspx?region=Czech_Republic-Hungary"class="style1">
 CzechRepublic<br />Hungary</a> 
 <a href="availability.aspx?region=Serbia" class="style1">Serbia</a>
 </div>
 </div>

这是 jquery 的样子：

    $(function () {

        $(".dot").mouseover(function () {
            $(this).parent().children("div").animate({ height: "130px" }, 1000).css("visibility", "visible").delay(3000);
        });

        $(".dot").mouseout(function () {
            $(this).parent().children("div").fadeOut(600).removeClass(".theDiv");
        })


        $(".dot2").mouseover(function () {
            $(this).parent().children("div").animate({ height: "18px" }, 1000).css("visibility", "visible").delay(1000);

        });

        $(".dot2").mouseout(function () {
            $(this).parent().children("div").fadeOut(600).removeClass(".theDiv");

        });


        $(".dot3").mouseover(function () {
            $(this).parent().children("div").animate({ height: "30px" }, 1000).css("visibility", "visible").delay(1000);
        })

        $(".dot3").mouseout(function () {
            $(this).parent().children("div").fadeOut(600).removeClass(".theDiv").end();

        });

        $(".dot4").mouseover(function () {
            $(this).parent().children("div").animate({ height: "50px" }, 1000).css("visibility", "visible").delay(1000);
        })

        $(".dot4").mouseout(function () {
            $(this).parent().children("div").fadeOut(600).removeClass(".theDiv");

        });


        $(".dot5").mouseover(function () {
            $(this).parent().children("div").animate({ height: "70px" }, 1000).css("visibility", "visible").delay(1000);
        })

        $(".dot5").mouseout(function () {
            $(this).parent().children("div").fadeOut(600).removeClass(".theDiv");

        });

        $(".dot6").mouseover(function () {
            $(this).parent().children("div").animate({ height: "145px" }, 1000).css("visibility", "visible").delay(1000);
        })

        $(".dot6").mouseout(function () {
            $(this).parent().children("div").fadeOut(600).removeClass(".theDiv");

        });



    }); 

</script>
4

1 回答 1

0

这与问题无关，但它会帮助您编写更好的代码：

不要用不同的值一遍又一遍地重复相同的代码，让你的元素包含你需要的数据。那么你只需要一个函数来完成整个集合。

例如：

<div class='dot' data-aniHeight='18px'></div>

JS：

$(".dot").mouseover(function () {
    var aniHeight = $(this).data('aniHeight');
    $(this).parent().children("div").animate({ height: aniHeight }, 1000).css("visibility", "visible").delay(1000);
});
于 2012-04-05T20:45:07.217 回答