Jak vytvořit cyklus kde se bude měnit název třídy

Běžné řešení tohoto problému by bylo takto:

$(document).ready(function(){
  for(var i = 0; i < 50; i++) {
    $('.klik_timeline_' + i).click( function(){
      alert("kliknuto na: "+i);
    });
  }
});
// to vrací 50 ač má vrátit třeba 1

Ale toto nefunguje. Vrací se nám vždy hodnota 50, ač se má vrátit například 1. => Další myšlenka by byla upravit zápis

$(document).ready(function(){
  for(var i = 0; i < 50; i++) {
      $('.blok_posuvnik_roku').on("click", '.klik_timeline_'+i, function(){
      alert("kliknuto na: "+i);
    });
  }
});

Ani toto nepomohlo..
Jaké je tedy řešení?

function createCallback( i ){
  return function(){
    alert("kliknuto na: "+i);
  }
}

$(document).ready(function()
{

  for( var i = 0 ; i < 50 ; i++ ){
    $('.blok_posuvnik_roku').on("click", '.klik_timeline_'+i, createCallback( i ));    
  }

});

Tento řekněme zvláštní obrat již funguje dle očekávání.

Poznámka (stav k září 2026): Dnes stačí v cyklu místo var použít let. Každé kolo cyklu pak má vlastní proměnnou i a první zápis funguje bez pomocné funkce:

for (let i = 0; i < 50; i++) {
  $('.klik_timeline_' + i).click(function () {
    alert("kliknuto na: " + i);
  });
}