JavaScript 数组点击

Question

我试图避免使用相同的 Javascript 行来实现相同的目的。

我有 3 个部分:

<div class="specs"></div>
<div class="description"></div>
<div class="comments"></div>

这 3 个链接:

<a href="#" class="readMore desc">Produkt beskrivelse</a>
<a href="#" class="readMore spec">Produkt specs</a>
<a href="#" class="readMore facebook"></i>Kommentarer</a>

这个 javascript，点击后会滚动到该部分

$(".facebook").on('click', function () {
    $('html, body').animate({
        scrollTop: $(".comments").offset().top - 200
    }, 1000);
});

$(".readMore.desc").on('click', function () {
    $('html, body').animate({
        scrollTop: $(".description").offset().top - 200
    }, 1000);
});

$(".readMore.spec").on('click', function () {
    $('html, body').animate({
        scrollTop: $(".specs").offset().top - 200
    }, 1000);
});

这 3 段 JavaScript 代码很烦人，因为它们做的事情完全相同。

一个活生生的例子可以是 seen here a live example 。您将在产品图片右侧看到 3 个按钮。

我不知道是否可以添加某种数组来解决？

Answer 1

处理此问题的一种方法是为每个链接提供一个 data- 属性，该属性描述链接应滚动到的位置。您可以使用.data()访问这些属性。

$(".readMore").on('click', function() {
  // Get the selector of where to scroll to
  var selector = $(this).data('selector');
  $('html, body').animate({
    scrollTop: $(selector).offset().top - 200
  }, 1000);
});

html, body {
  height: 100%;
}
div {
  height: 100%;
  margin-top: 20px;
  border: solid 1px #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="readMore desc" data-selector=".description">Produkt beskrivelse</a>
<a href="#" class="readMore spec" data-selector=".specs">Produkt specs</a>
<a href="#" class="readMore facebook" data-selector=".comments">Kommentarer</a>

<div class="specs">
  Specs
</div>
<div class="description">
  Description
</div>
<div class="comments">
  Comments
</div>