我怎样才能压缩这个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脚本？

回答

相关问题