Javascript：automatize function

Question

おはよう、

私はマウスクリックでアクションを実行するためのコードを用意しています。私は特定のDOM要素にこの機能を割り当てるよりも、

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

    } 
})(jQuery); 

：まず、私は、私は別の要素のクリックを実行する際の要素の上に画面をスクロール機能をした

$('#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 "は実際にブートストラップcollapse.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(); 
    }); 
} 

created arrayは、サイクルに入れる必要がある要素の実際の数を取得します。

Answer 1

問題は、iの値が最後の値であるinfamous for loop issueです。しかし、単純なデータ属性を使用できるときにループする必要はありません。

物事

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

を選択し、リンクするデータ属性を使用して、JavaScriptの

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