Question

你好我是编程的新手，所以请原谅我的无知。

我有几个元素，当点击时使用ScrollTop jQuery函数滚动到指定的点（在另一个bootstrap nav-tab中）。我有大约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文件有20个左右的这个函数，其中“#element”和“＃element2”以“#alpha”“＃alpha2”，“＃beta”“＃beta2”等为子...

我应该使用数组吗？一类？谢谢你的时间。

Answer 1

尝试添加类＆＃34;元素＆＃34;对于每个具有元素id后跟数字的项目 - 此时无需删除id。

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

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

如果您使用的是班级名称而不是ID，那么当任何类别为＆＃34;元素＆＃34;的时候，您都会收到通知。点击。

如果你需要根据它的特殊津贴 - 在你的单一功能中，你可以通过检查你的身份来检查你正在处理哪一个：

$(this).attr('id')

祝你好运！

Answer 2

<强> See Working Fiddle Here

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

element text
alpha text
beta text

在javascript代码中添加两个lignes：

JS：

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

之后用动态替换静态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配对元素

2 个答案: