jquery - ホバー効果が正しく機能しない

Question

私は先週からこれについて頭を悩ませてきました:(タブ付きインターフェースを使用するページがありますが、メニューはマップレイアウトに関連付けられたグラフィックです.私がしたことは、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>

グラフィックは 5 つの領域に分かれているので、それぞれにホバー効果を割り当てました。初期ロードでは、正常に動作します。初期ロード ("id21") から、area1 以外の領域にカーソルを合わせた場合も同様です。コードは期待どおりに機能します。他の領域の 1 つから領域 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) でのみこの問題が発生することです。

助けてください:(事前に感謝します、

ポチ

Answer 1

私が 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")