javascript - jQuery/Javascript 代码重复

Question

我正在尝试为我的程序使用 scrollTop 函数，但我发现我正在编写大量重复代码。

这是一个例子:

<div id="table_contents >
    <ul>
        <li id="one"> title One </li>
        <li id="two"> title Two </li>
    </ul>
</div>


<div id="content">
    <p id="target_one"> I am content one </p>

    <p id="target_two"> I am content two </p>
</div>

如果我要单击“title One”，我想滚动到“I am content one”标题二和内容二也是如此。

使用 jQuery/JS 很容易做到这一点

$("#one").click(function() {
        $('html, body').animate({
            scrollTop: $("#target_one").offset().top -20
        }, 800);
    });

但举例来说，我的目录中有 15 个元素，我想让每个元素都可点击以滚动到其内容。为此，我必须为每个元素重复上述代码 15 次。

还有比这更好的方法吗？

Answer 1

只需将您的脚本更改为:

方法一

$("#table_contents").on("click","li",function() {
        $('html, body').animate({
            scrollTop: $("#target_"+$(this).prop('id')).offset().top -20
        }, 800);
    });

在这个方法中，被点击元素的id 将附加到“target_”，以定位“target id”。 此方法甚至适用于动态添加的 li 元素。

---

方法二:没有 ID [但顺序相同]:

$("#table_contents").on("click","li",function() {
        $('html, body').animate({
            scrollTop: $("#content p").eq($(this).index()).offset().top -20
        }, 800);
    });

在这个方法中，元素li的索引映射到p元素的索引来定位滚动位置。

完成了!!

http://jsfiddle.net/bmL0o9ez/

http://jsfiddle.net/bmL0o9ez/2/