JavaScript/JQUERY改進代碼

我得到了Js/Jquery代碼來觸發顯示/隱藏懸停的彩色「X」。每個「X」都有不同的div和要顯示的內容。我知道有一種更好的方式來編寫Js/Jquery，其他重複相同的代碼，但只是更改每個「X」所呼叫的div的名稱。您可以在行動在這個fiddle
我也使用jQuery qtips插件來獲得衰落箱工作

我會明白如何這更好的代碼的任何建議，請參考這一點。
感謝

下面是我說的JS/jQuery的的例子約JavaScript/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); 
          }); 
         }); 
        }); 
       }); 
      }); 
     }); 
    }); 
});

來源

2012-03-16 rolando.pdl

我不確定stackoverflow是一個地方「請重構我的代碼，它的工作原理，但不是非常模塊化」！ – SpaceBison 2012-03-16 15:01:00

這可能會關閉，因爲關閉主題/屬於http://codereview.stackexchange.com/ – jrummell 2012-03-16 15:01:00

確實......但看到他迄今爲止只贏得了11分，這意味着他可能只有1個問題沒有回答。 – Kristian 2012-03-16 15:01:44

首先，你應該嘗試使用jQuery .hover（）方法，因爲它通常是更可靠的方面註冊一個鼠標並且不發射多個事件。

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

其次，

你只需要來包裝你的代碼在一個文檔準備功能，沒有幾個。這將有同樣的結果

來源

2012-03-16 15:00:54 Kristian

謝謝，我意識到，我試圖讓這個東西更好，這就是爲什麼我發佈的問題;） – 2012-03-16 16:15:36

如果你改變你的div類都是.box和.trigger（而不是BOX2，BOX3，觸發2，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')。

來源

2012-03-16 15:02:29 jrummell

謝謝jrummell，有一個代碼的鏈接，它說：「你可以看到這個動作在這個小提琴「 – 2012-03-16 16:26:03

函數和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的方法會更有效和可靠。

來源

2012-03-16 15:04:03

JavaScript/JQUERY改進代碼

回答

相關問題