Question

我有一个jQuery脚本，可以自动滚动到不同的div。这段代码有点乱，因为我是jQuery的新手，所以我希望som helt with compact it。

我的想法是，我可以以某种方式检查按下了什么按钮，并根据具体情况更改要滚动到的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>

Answer 1

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

第二：由于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>

<强>的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>

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

Answer 2

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

我怎么能压缩这个jQuery脚本？

2 个答案: