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