Javascript：automatize function

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 collapse.js。 “当用户看到折叠元素时，会触发此事件（将等待CSS转换完成）​​。” 代码正在工作，但它确实不太好看。有没有办法做出某种循环？标准“”不工作：

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(); 
});