悬停效果无法正常使用

| 自上周以来，我一直对此深思熟虑：（我有一个页面使用选项卡式界面，但菜单是与地图布局相关的图形。我所做的是我使用jQuery代码来实现以下效果五个区域中的每个区域。以下是代码： 
      var id1_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1.png\";

      var id11_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1-1.png\";

      var id12_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1-2.png\";

      var id13_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1-3.png\";  

      var id2_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id2.png\";

      var id21_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id2-1.png\";

      var id22_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id2-2.png\";

      var id23_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id2-3.png\";    

      var id3_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id3.png\";

      var id31_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id3-1.png\";

      var id32_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id3-2.png\";

      var id33_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id3-3.png\";       

      var id4_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id4.png\";

      var id41_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id4-1.png\";

      var id42_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id4-2.png\";

      var id43_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id4-3.png\"; 

(...I have a bunch of other similar declarations, 58 images in all...)   

      var img = \"\";

      function rolloverArea(area, orgImgSrc, tgtImgSrc, orgCursor, tgtCursor) // jQuery script for rollover effect
      {
        $(\"imgTab\").attr(\"src\",\"\");
        $(\"#imgTab\").attr(\"src\", orgImgSrc);
        $(area).hover(
          function()
            {
              //alert(orgImgSrc + \" on hover\");
              //alert(tgtImgSrc + \" on hover\");
              $(\"imgTab\").attr(\"src\",\"\");
              $(\"#imgTab\").attr(\"src\", tgtImgSrc);
              $(\"#imgTab\").css(\"cursor\",tgtCursor);
            },
          function()
            {
              //alert(orgImgSrc + \" after hover\");
              //alert(tgtImgSrc + \" after hover\");
              $(\"imgTab\").attr(\"src\",\"\");
              $(\"#imgTab\").attr(\"src\", orgImgSrc);
              $(\"#imgTab\").css(\"cursor\",orgCursor);
             }
        );
      }

      function changeImgState(img) // tab interface of Day Week and Month arrows
      {
        var myImgTab = document.getElementById(\"imgTab\");

        switch (img)
        {
          case \'id1\':
        $(myImgTab).attr(\"src\", \"\");      
        $(myImgTab).attr(\"src\", id1_src);
        $(\"#D1\").css({\"visibility\":\"visible\", \"position\":\"relative\", \"top\":\"0px\"});
        $(\"#D2\").css({\"visibility\":\"hidden\", \"position\":\"relative\", \"top\":\"0px\"});
        $(\"#D3\").css({\"visibility\":\"hidden\", \"position\":\"relative\", \"top\":\"0px\"});

        // Rollover effect for the image
        rolloverArea(\"#area1\",id1_src,id1_src,\"auto\",\"auto\");
        rolloverArea(\"#area2\",id1_src,id11_src,\"auto\",\"pointer\");
        rolloverArea(\"#area3\",id1_src,id12_src,\"auto\",\"pointer\");
        rolloverArea(\"#area4\",id1_src,id13_src,\"auto\",\"pointer\");
        rolloverArea(\"#area5\",id1_src,id1_src,\"auto\",\"auto\");

        // onClick effect
        $(\"#area2\").click(function() {
          img = \"\";
          changeImgState(\"id2\");

          }
         );

         $(\"#area3\").click(function() {
          img = \"\";
          changeImgState(\"id3\");
          }
         );

         $(\"#area4\").click(function() {
          img = \"\";
          changeImgState(\"id4\");
          }
         );

        break;
          case \'id2\':

        $(myImgTab).attr(\"src\", id2_src);
        $(\"#D1\").css({\"visibility\":\"hidden\", \"position\":\"relative\", \"top\":\"0px\"});
        $(\"#D2\").css({\"visibility\":\"visible\", \"position\":\"relative\", \"top\":\"-588px\"});
        $(\"#D3\").css({\"visibility\":\"hidden\", \"position\":\"relative\", \"top\":\"0px\"});


        // Rollover effect for the image
        rolloverArea(\"#area1\",id2_src,id21_src,\"auto\",\"pointer\");
        rolloverArea(\"#area2\",id2_src,id2_src,\"auto\",\"auto\");
        rolloverArea(\"#area3\",id2_src,id22_src,\"auto\",\"pointer\");
        rolloverArea(\"#area4\",id2_src,id23_src,\"auto\",\"pointer\");
        rolloverArea(\"#area5\",id2_src,id2_src,\"auto\",\"auto\");

        // onClick effect
        $(\"#area1\").click(function() {
          $(myImgTab).attr(\"src\", \"\");
          img = \"\";
          changeImgState(\"id1\");
          }
         );

         $(\"#area3\").click(function() {
          img = \"\";
          changeImgState(\"id3\");
          }
         );

         $(\"#area4\").click(function() {
          img = \"\";
          changeImgState(\"id4\");
          }
         );

        break;

          case \'id3\':

        $(myImgTab).attr(\"src\", id3_src);
        $(\"#D1\").css({\"visibility\":\"hidden\", \"position\":\"relative\", \"top\":\"0px\"});
        $(\"#D2\").css({\"visibility\":\"hidden\", \"position\":\"relative\", \"top\":\"0px\"});
        $(\"#D3\").css({\"visibility\":\"visible\", \"position\":\"relative\", \"top\":\"-874px\"});


        // Rollover effect for the image
        rolloverArea(\"#area1\",id3_src,id31_src,\"auto\",\"pointer\");
        rolloverArea(\"#area2\",id3_src,id32_src,\"auto\",\"pointer\");
        rolloverArea(\"#area3\",id3_src,id3_src,\"auto\",\"auto\");
        rolloverArea(\"#area4\",id3_src,id33_src,\"auto\",\"pointer\");
        rolloverArea(\"#area5\",id3_src,id3_src,\"auto\",\"auto\");

        // onClick effect
        $(\"#area1\").click(function() {
          changeImgState(\"id1\");
          }
         );

        $(\"#area2\").click(function() {
          changeImgState(\"id2\");
          }
         );

         $(\"#area4\").click(function() {
          changeImgState(\"id4\");
          }
         );

        break;

          case \'id4\':

        $(myImgTab).attr(\"src\", id4_src);

        // Rollover effect for the image
        rolloverArea(\"#area1\",id4_src,id41_src,\"auto\",\"pointer\");
        rolloverArea(\"#area2\",id4_src,id42_src,\"auto\",\"pointer\");
        rolloverArea(\"#area3\",id4_src,id43_src,\"auto\",\"pointer\");
        rolloverArea(\"#area4\",id4_src,id4_src,\"auto\",\"auto\");
        rolloverArea(\"#area5\",id4_src,id4_src,\"auto\",\"auto\");

        // onClick effect
        $(\"#area1\").click(function() {
          changeImgState(\"id1\");
          }
         );

        $(\"#area2\").click(function() {
          changeImgState(\"id2\");
          }
         );

         $(\"#area3\").click(function() {
          changeImgState(\"id3\");
          }
         );

        break;

(...There are some more similar cases, but they\'re all basically the same as those above, except for the variables...)

        }

      } 

/* My page has two tabs, the first one has three options - First Day, First Week, and First Month. The other one is the one that uses the image. The former is tied to changeTab and the other one uses the changeImgState. However, the former also uses the codes of the latter. */

      function changeTab(tab)
      {   
        switch(tab)     
        {
          case \'day1\':
        var myTab = document.getElementById(\"day1\");

        document.getElementById(\"week1\").className = \"active\";
        document.getElementById(\"month1\").className = \"active\";        
        myTab.className = \"current\"; 

        changeImgState(\"id1\");

        // Rollover effect for the image
        rolloverArea(\"#area1\",id1_src,id1_src,\"auto\",\"auto\");
        rolloverArea(\"#area2\",id1_src,id11_src,\"auto\",\"pointer\");
        rolloverArea(\"#area3\",id1_src,id12_src,\"auto\",\"pointer\");
        rolloverArea(\"#area4\",id1_src,id13_src,\"auto\",\"pointer\");
        rolloverArea(\"#area5\",id1_src,id1_src,\"auto\",\"auto\");

        // onClick effect
        $(\"#area2\").click(function() {
          changeImgState(\"id2\");
          }
         );

         $(\"#area3\").click(function() {
          changeImgState(\"id3\");
          }
         );

         $(\"#area4\").click(function() {
          changeImgState(\"id4\");
          }
         );         

        break; 
          case \'week1\':
        document.getElementById(\"day1\").className = \"active\";
        document.getElementById(\"month1\").className = \"active\";         
        document.getElementById(\"week1\").className = \"current\";

        changeImgState(\"iw1\");

        rolloverArea(\"#area1\",iw1_src,iw1_src,\"auto\",\"auto\");
        rolloverArea(\"#area2\",iw1_src,iw11_src,\"auto\",\"pointer\");
        rolloverArea(\"#area3\",iw1_src,iw12_src,\"auto\",\"pointer\");
        rolloverArea(\"#area4\",iw1_src,iw13_src,\"auto\",\"pointer\");
        rolloverArea(\"#area5\",iw1_src,iw14_src,\"auto\",\"pointer\");

        // onClick effect
        $(\"#area2\").click(function() {
          changeImgState(\"iw2\");
          }
         );

         $(\"#area3\").click(function() {
          changeImgState(\"iw3\");
          }
         );

         $(\"#area4\").click(function() {
          changeImgState(\"iw4\");
          }
         );

         $(\"#area5\").click(function() {
          changeImgState(\"iw5\");
          }
         );         

        break;
          case \'month1\':
        document.getElementById(\"week1\").className = \"active\";
        document.getElementById(\"day1\").className = \"active\";         
        document.getElementById(\"month1\").className = \"current\";

        changeImgState(\"im1\");

        // Rollover effect for the image
        rolloverArea(\"#area1\",im1_src,im1_src,\"auto\",\"auto\");
        rolloverArea(\"#area2\",im1_src,im11_src,\"auto\",\"pointer\");
        rolloverArea(\"#area3\",im1_src,im12_src,\"auto\",\"pointer\");
        rolloverArea(\"#area4\",im1_src,im13_src,\"auto\",\"pointer\");
        rolloverArea(\"#area5\",im1_src,im1_src,\"auto\",\"auto\");

        // onClick effect
        $(\"#area2\").click(function() {
          changeImgState(\"im2\");
          }
         );

         $(\"#area3\").click(function() {
          changeImgState(\"im3\");
          }
         );

         $(\"#area4\").click(function() {
          changeImgState(\"im4\");
          }
         );         

        break;
        }  

      }

    </script>
    <script lang=\"en\" type=\"text/jscript\">
                  $(window).load(function()
                    {
                      changeTab(\'day1\');
                      //preLoadImages();
                    });
    </script>
该图形分为五个区域，因此我为它们分配了悬停效果。在初始加载时，它可以正常工作。从初始负载（\“ id21 \”）开始，我将鼠标悬停在area1以外的区域上时，情况也是如此。代码按预期工作。当我从其他区域之一单击区域1时出现问题。因此，例如，我在区域2中，然后单击区域1，图像更改开始变得混乱。 例如，在初始加载时，它应该转到id1。该图像显示id1_src（即id1.png）。将鼠标悬停在其他区域会产生以下结果： 区域2：id1-1.png（id11_src） 区域3：id1-2.png（id12_src） 区域4：id1-3.png（id13_src） 当我单击区域2时，图像的源更改为id2.png（id2_src），因此这是我们的基本图形。悬停效果如下： 区域1：id1-1.png（id21_src） 区域3：id1-2.png（id22_src） 区域4：id1-3.png（id23_src） 其他区域遵循相同的模式。当我从任何其他区域单击区域1时，都会遇到错误。以某种方式，而不是遵循上面为id1列出的约定，图形开始变得混乱，因为混合（或保留了）先前的值。悬停效果将显示原始基本图形。 奇怪的是，从其他区域转换时，我仅在id1（或区域1）中遇到此问题。 请帮助:(预先感谢， ch     
2020-02-02 2 条评论
分享

没有找到相关结果

    已邀请:

    版萍层分

            如果我对JavaScript有更好的了解，我可以给您一种合理的方式来压缩所有这些行： 
    var id1_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1.png\";
var id11_src = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1-1.png\";
    有几种方法可以改善此问题；对于带有格式化打印例程的语言，它看起来像这样： 
    char *basefn = \"/systems_hr/onboarding/Custom%%20Pages/Checklist%%20EN/images/%s.png\";
    然后，当您需要一个时，可以使用： 
    printf(basefn, \"id1\");
printf(basefn, \"id11\");
    在没有格式化打印例程的语言中，您可能会使用字符串连接： 
    basefn = \"/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/\"
tailfn = \".png\"

def mk_fn(image)
    return basefn + image + tailfn
end

mk_fn(\"id1\")
mk_fn(\"id11\")
        
    2020-02-02 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.13426804542542