Przypisywanie zdarzeń

Witam,
napotkałam mur, przed którym stoję i ani rusz dalej. Przeszukałam internet w celu znalezienia odpowiedzi i nic.
Podejrzewam, że jest to banalnie proste ale wciąż mi to umyka.Może ktoś pomoże?

Na początku mam utworzonych 12 zmiennych z przypisanymi zdarzeniami do kliknięcia. Dla każdego div`a z id przy kliknięciu uruchamia się funkcja revealCard, która jako parametr przyjmuje numer od 0-11, przypisany bezpośrednio do obrazka dla danego div1a i wykorzystywany w dalszej części działań.
Chciałabym zautomatyzować pracę przypisywania zdarzeń (zamiast tworzyć ręcznie 12 zmiennych), niestety moje próby kończą się niepowodzeniem.
Próbowałam tego:
$('.card').on("click", function() { revealCard(nr); });
niestety nie zadziałało :(

oraz tego:
for (var i = 0; i < 12; i++) {
var c[i] = $('c'+i).on("click", function() { revealCard(i); });
}
niestety też nie działa :(

Moje zmienne wyglądają tak:
var c0 = $('#c0').on("click", function() { revealCard(0); });
var c1 = $('#c1').on("click", function() { revealCard(1); });
var c2 = $('#c2').on("click", function() { revealCard(2); });
var c3 = $('#c3').on("click", function() { revealCard(3); });
var c4 = $('#c4').on("click", function() { revealCard(4); });
var c5 = $('#c5').on("click", function() { revealCard(5); });
var c6 = $('#c6').on("click", function() { revealCard(6); });
var c7 = $('#c7').on("click", function() { revealCard(7); });
var c8 = $('#c8').on("click", function() { revealCard(8); });
var c9 = $('#c9').on("click", function() { revealCard(9); });
var c10 = $('#c10').on("click", function() { revealCard(10); });
var c11 = $('#c11').on("click", function() { revealCard(11); });

Z pewnością proces tworzenia zmiennych można jakoś skrócić...

Pozdrawiam :)

Cos w tym stylu? https://embed.plnkr.co/xrXbS00KX77WtE8Rofl6/

  $('.card').each(function(idx) {
    $(this).on('click', function() {
      revealCard(idx);
    });
  });

Czysty JS (bo od niego powinnaś zacząć jak nie ogarniasz podstaw):

<div id="table" class="table">
  <div class="card" data-type="card">card 1</div>
  <div class="card" data-type="card">card 2</div>
  <div class="card" data-type="card">card 3</div>
  <div class="card" data-type="card">card 4</div>
  <div class="card" data-type="card">card 5</div>
  <div class="card" data-type="card">card 6</div>
  <div class="card" data-type="card">card 7</div>
  <div class="card" data-type="card">card 8</div>
  <div class="card" data-type="card">card 9</div>
</div>

document
  .getElementById('table')
  .addEventListener('click', ({ target }) => {
    if (target.dataset.type === 'card') {
      target.classList.toggle('revealed')
    }
  })

Demo: https://codepen.io/caderek/pen/wPLdwG?editors=1010

Wersja jQ: https://codepen.io/caderek/pen/rYEmWK?editors=1010

Rozwiązanie @shargin jest ok, ale:

• niepotrzebnie przypina kilka listenerów, wystarczy jeden z event delegation,
• nie zadziała dla dynamicznie dodanego elementu,
• operuje na indeksach, co pewnie w ogóle nie jest ci potrzebne.

shagrin napisał(a):

Cos w tym stylu? https://embed.plnkr.co/xrXbS00KX77WtE8Rofl6/

  $('.card').each(function(idx) {
    $(this).on('click', function() {
      revealCard(idx);
    });
  });

Bardzo dziękuję - zadziałało! Brakowało mi tego "each(function())".
Pozdrawiam serdecznie

Maciej Cąderek napisał(a):

Czysty JS (bo od niego powinnaś zacząć jak nie ogarniasz podstaw):

<div id="table" class="table">
  <div class="card" data-type="card">card 1</div>
  <div class="card" data-type="card">card 2</div>
  <div class="card" data-type="card">card 3</div>
  <div class="card" data-type="card">card 4</div>
  <div class="card" data-type="card">card 5</div>
  <div class="card" data-type="card">card 6</div>
  <div class="card" data-type="card">card 7</div>
  <div class="card" data-type="card">card 8</div>
  <div class="card" data-type="card">card 9</div>
</div>

document
  .getElementById('table')
  .addEventListener('click', ({ target }) => {
    if (target.dataset.type === 'card') {
      target.classList.toggle('revealed')
    }
  })

Demo: https://codepen.io/caderek/pen/wPLdwG?editors=1010

Wersja jQ: https://codepen.io/caderek/pen/rYEmWK?editors=1010

Rozwiązanie @shargin jest ok, ale:

• niepotrzebnie przypina kilka listenerów, wystarczy jeden z event delegation,
• nie zadziała dla dynamicznie dodanego elementu,
• operuje na indeksach, co pewnie w ogóle nie jest ci potrzebne.

Dziękuję za odpowiedź.
Tak się składa, że indeksy są kluczowe dla mnie w tej części kodu.
Pozdrawiam :)

EOT