问Javascript数组点击
EN

Stack Overflow用户

提问于 2016-12-06 21:05:02

回答 7查看 105关注 0票数 0

为了同样的目的，我尽量避免使用相同的Javascript代码行。

我有三个部分：

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

这三个链接：

<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);
});

这三段javascript代码很烦人，因为它做的是完全相同的事情。

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

我不知道是否可以添加某种类型的数组作为解决方案？

javascript

jquery

回答 7

Stack Overflow用户

回答已采纳

发布于 2016-12-06 21:11:38

处理这种情况的一种方法是为每个链接提供一个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>

票数 3

Stack Overflow用户

发布于 2016-12-06 21:11:29

公共类(您拥有的)和数据属性将在这里保存您。

<a href="#" class="readMore desc" data-dest=".comments">Produkt beskrivelse</a>
<a href="#" class="readMore spec" data-dest=".specs">Produkt specs</a>
<a href="#" class="readMore facebook" data-dest=".description"></i>Kommentarer</a>

现在，由一个处理程序来管理它们：

$(".readMore").on('click', function () {
    var dest = $(this).data("dest");

    $('html, body').animate({
        scrollTop: $(dest).offset().top - 200
    }, 1000);
});

票数 2

Stack Overflow用户

发布于 2016-12-06 21:12:23

//extraced the common parts
function scrollToTop ( elementSelector ) {
    $('html, body').animate({
        scrollTop: $(elementSelector).offset().top - 200
    }, 1000);
}

$(".facebook").on('click', function () {
    scrollToTop('.comments');
});

$(".readMore.desc").on('click', function () {
    scrollToTop('.description');
});

$(".readMore.spec").on('click', function () {
    scrollToTop('.specs');
});