我怎樣才能壓縮這個jQuery腳本？

我有一個jQuery腳本，用於自動滾動到不同的div。代碼有點凌亂，我希望som能夠緊湊，因爲我是jQuery的新手。我怎樣才能壓縮這個jQuery腳本？

我的想法是，我以某種方式可以檢查按下哪個按鈕，並根據該更改div滾動。除了按鈕類和div類以外，代碼是相同的。

下面是代碼：

<!-- Song 1 --> 
<script> 
$(document).ready(function(){ 
    $(".song1_btn").click(function(){ 
    $("html, body").animate({ scrollLeft: $('.song1').offset().left }, 1000); 
    }); 
}); 
</script> 

<!-- Song 2 --> 
<script> 
$(document).ready(function(){ 
    $(".song2_btn").click(function(){ 
    $("html, body").animate({ scrollLeft: $('.song2').offset().left }, 1000); 
    }); 
}); 
</script> 

<!-- Song 3 --> 
<script> 
$(document).ready(function(){ 
    $(".song3_btn").click(function(){ 
    $("html, body").animate({ scrollLeft: $('.song3').offset().left }, 1000); 
    }); 
}); 
</script> 

<!-- Song 4 --> 
<script> 
$(document).ready(function(){ 
    $(".song4_btn").click(function(){ 
    $("html, body").animate({ scrollLeft: $('.song4').offset().left }, 1000); 
    }); 
}); 
</script> 

<!-- Song 5 --> 
<script> 
$(document).ready(function(){ 
    $(".song5_btn").click(function(){ 
    $("html, body").animate({ scrollLeft: $('.song5').offset().left }, 1000); 
    }); 
}); 
</script> 

<!-- Song 6 --> 
<script> 
$(document).ready(function(){ 
    $(".song6_btn").click(function(){ 
    $("html, body").animate({ scrollLeft: $('.song6').offset().left }, 1000); 
    }); 
}); 
</script>

來源

2013-12-11 Alexander Erlandsson

該類更適合作爲ID。類通常描述一組元素（例如'.song'） –

只有數字發生變化時，您的代碼纔會相同。 *你認爲重構是什麼？ –

謝謝！我還沒有做任何微調到我的html/css，但我想知道如何壓縮jQuery。 –

-1

您可以使用jQuery的屬性選擇：

$('[class$="_btn"]').click(function() { //class name ends with "_btn" 
    var firstPartOfClass = this.className.split('_')[0]; //"song4"; 
    var number = firstPartOfClass[firstPartOfClass.length - 1]; //"4" 

    $("html, body").animate({ scrollLeft: $('.song' + number).offset().left }, 1000); 
});

來源

2013-12-11 13:41:12 nativehr

首先：您可以一次定義你的document.ready，把所有你想要的腳本當DOM準備就緒時使用。

第二個：由於jquery中的點擊功能基本相同，因此您應該嘗試創建1個函數，您可以使用它來處理所有clickevents。

你可以做這樣的事情：

HTML

<a href="#" class="song_btn" data-animate="song_1">song 1</a> 
<a href="#" class="song_btn" data-animate="song_2">song 2</a> 
<a href="#" class="song_btn" data-animate="song_3">song 3</a> 

<div class="song_1"> 
    song 1 
</div> 

<div class="song_2"> 
    song 2 
</div> 

<div class="song_3"> 
    song 3 
</div>

的Javascript

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".song_btn").click(function(){ 
    var element = $(this).attr("data-animate");  
    $("html, body").animate({ scrollLeft: $('.' + element).offset().left }, 1000); 
    }); 
}); 
</script>

這是一個解決方案，但正如他們所說的有很多道路，導致去羅馬...

來源

2013-12-11 13:50:16 Jop

我怎樣才能壓縮這個jQuery腳本？

回答

相關問題