Javascript:自动化功能

Question

美好的一天，

我有一段代码，旨在对鼠标单击执行操作。首先，我创建了一个函数，当我单击另一个元素时，该函数会在元素上滚动屏幕:

(function($) {
    $.fn.goTo = function() {
        $('html, body').animate({
            scrollTop: $(this).offset().top + 'px'
        }, 'fast');

    }
})(jQuery);

然后我将此函数分配给特定的 DOM 元素:

$('#collapse1').on('shown.bs.collapse', function () {
     $('#s1').goTo();  
});

$('#collapse2').on('shown.bs.collapse', function () {
     $('#s2').goTo();  
});

$('#collapse3').on('shown.bs.collapse', function () {
     $('#s3').goTo();  
});

$('#collapse4').on('shown.bs.collapse', function () {
     $('#s4').goTo();  
});
etc...

“shown.bs.collapse”实际上来自 bootstrap crash.js。 “当折叠元素对用户可见时会触发此事件(将等待 CSS 转换完成)​​。” 该代码可以工作，但看起来确实不太好。有没有办法进行某种循环？标准“for”不起作用:

var collapseNumber = jQuery.makeArray(document.getElementsByClassName("panel panel-default"));

for (var i = 0; i < collapseNumber.length; i++) {

  $('#collapse' + i).on('shown.bs.collapse', function () {
     $('#s' + i).goTo();  
   });
}

创建的数组用于获取实际的元素数量，我需要将其放入循环中。

Answer 1

您遇到的问题是 infamous for loop issue其中i 的值是最后一个值。但是，当可以使用简单的数据属性时，没有理由必须循环。

只需使用数据属性来选择和链接事物

<div data-goto="#s1">...</div>

和 JavaScript

$('[data-goto]').on('shown.bs.collapse', function () {
    var selector = $(this).data("goto");
    $(selector).goTo();  
});