Javascript Jquery ScrollTop 配对元素

Question

您好，我是编程新手，请原谅我的无知。

我有几个元素，单击它们时使用 ScrollTop jQuery 函数滚动到指定点（在另一个 bootstrap 导航选项卡中）。我有大约 20 个不同的元素，单击它们即可执行此操作。我已经编写了 20 个看起来与下面的函数相似的不同函数。我确定必须有一种方法来存储这些对，并有一个调用这些对的 ScrollTop 函数。

$('#element').click(function(e) {
  e.preventDefault();
  var target = $('#element2').closest('.tab-pane').attr('id');
  showTab(target);
  setTimeout(function() {
    $('html, body, nav').animate({
    scrollTop: $("#element2").offset().top -100
}, 500);
}, 500);
});

所以我的 js 文件有大约二十个这个函数，其中“#element”和“#element2”被替换为“#alpha”“#alpha2”，“#beta”“#beta2”等。 ..

我应该使用数组吗？ class?谢谢你的时间。

Answer 1

尝试将 class "element" 添加到每个具有元素 ID 后跟数字的项目 - 此时无需删除 ID。

然后，将代码中的选择器更改为：

$('.element').click(function(e) {

如果您使用 class 名称而不是 ID，当任何 class 为 "element" 的项目被点击时，您会收到通知。

如果您需要根据它是哪一个进行特殊津贴 - 在您的单一函数中，您可以通过检查它的 id 来检查您正在处理的是哪一个：

$(this).attr('id')

祝你好运！

Answer 2

See Working Fiddle Here

是的，您可以将相同的 class 添加到您想要的所有元素中点击它们，以减少代码，请参阅 HTML 示例：

element text
alpha text
beta text

向 javascript 代码添加两行：

JS :

var id = $(this).attr('id'); //Id of clicked item
var scrollToId = '#'+id+"2"; //Id of scrolled to item

之后将静态 ID 替换为动态 ID (scrollToId, id)。

完整 JS :

$('.scrollTop').click(function(e) { 
    e.preventDefault(); 

    var id = $(this).attr('id'); //Id of clicked item
    var scrollToId = '#'+id+"2"; //Id of scrolled to item
    var target = $(scrollToId).closest('.tab-pane').attr('id');

    showTab(target);
    setTimeout(function() {
        $('html, body, nav').animate({
            scrollTop: $(scrollToId).offset().top -100
        }, 500);
    });
});

Javascript Jquery ScrollTop 配对元素

Javascript Jquery ScrollTop paired elements

html

javascript

jquery

scrolltop