如何压缩这个jQuery脚本？

我有一个jQuery脚本，可以自动滚动到不同的div。代码有点凌乱，因为我是jQuery新手，所以我希望som能帮助我压缩代码

我的想法是，我可以通过某种方式检查按下了什么按钮，并根据这一点更改滚动到哪个div。除了button类和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>

$（文档）.ready（函数（）{
$（“.song1_btn”）。单击（函数（）{
$（“html，body”）.animate（{scrollLeft:$（'.song1'）.offset（）.left}，1000）；
});
});
$（文档）.ready（函数（）{
$（“.song2_btn”）。单击（函数（）{
$（“html，body”）.animate（{scrollLeft:$（'.song2'）.offset（）.left}，1000）；
});
});
$（文档）.ready（函数（）{
$（“.song3_btn”）。单击（函数（）{
$（“html，body”）.animate（{scrollLeft:$（'.song3'）.offset（）.left}，1000）；
});
});
$（文档）.ready（函数（）{
$（“.song4_btn”）。单击（函数（）{
$（“html，body”）.animate（{scrollLeft:$（'.song4'）.offset（）.left}，1000）；
});
});
$（文档）.ready（函数（）{
$（“.song5_btn”）。单击（函数（）{
$（“html，body”）.animate（{scrollLeft:$（'.song5'）.offset（）.left}，1000）；
});
});
$（文档）.ready（函数（）{
$（“.song6_btn”）。单击（函数（）{
$（“html，body”）.animate（{scrollLeft:$（'.song6'）.offset（）.left}，1000）；
});
});

您可以使用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);
});

---

首先：您可以定义document.ready一次，并在DOM就绪时放置所有要使用的脚本

Second：由于jquery中的单击功能基本相同，您应该尝试创建一个可用于所有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>

歌曲1
歌曲2
歌曲3

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>

$（文档）.ready（函数（）{
$（“.song_btn”）。单击（函数（）{
var元素=$（this.attr（“数据动画”）；
$（“html，body”）.animate（{scrollLeft:$（'..+元素）.offset（）.left}，1000）；
});
});

---

这是一个解决方案，但正如他们所说，有许多道路通往罗马…

该类更适合作为ID。类通常描述一组元素（例如

.song

），您有相同的代码，其中只有一个数字发生变化。你认为重构是什么？谢谢！我还没有对我的html/css进行任何微调，但我想知道如何压缩jQuery。Dave-我知道重构是什么，并试图在问题中传递它，但我不知道如何将它变成jQuery脚本的一部分，因为我是新手。如果你知道怎么做，请给我举个例子。@Alexander：如果你想得到相关的答案，请张贴你的HTML标记