Javascript数组点击
Javascript数组点击
提问于 2016-12-07 05:05:02
为了同样的目的，我尽量避免使用相同的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个按钮。
我不知道是否可以添加某种类型的数组作为解决方案？
回答 7
Stack Overflow用户
回答已采纳
发布于 2016-12-07 05: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>
Stack Overflow用户
发布于 2016-12-07 05: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);
});Stack Overflow用户
发布于 2016-12-07 05: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');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41004886
复制相关文章
相似问题
腾讯云开发者
