0

自上周以来，我一直在为此绞尽脑汁：（我有一个使用选项卡式界面的页面，但菜单是与地图布局相关的图形。我所做的是我使用 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）中遇到此问题。

请帮助:(提前谢谢，

波奇

4

1 回答 1

0

如果我更了解 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")
于 2011-06-13T08:54:19.720 回答