Динамические идентификаторы кнопок - Javascript

Question

У меня есть несколько кнопок, сгенерированных из цикла for следующим образом, и id = like:

<button type="submit" id = "like" class="btn btn-custom btn-sm like"><span id="tx-like">Like</span></button>

У меня есть скрипт, который изменяет «like» на «Different» и «Different» на"like", он получает элемент по Id:

$( function() {
        $('#like').click( function() {
            var t = $("#tx-like").html();
            if(t == 'Like'){
                $("#tx-like").html("Unlike");
            }else{
                $("#tx-like").html("Like");
            }
        } );
    } );

Это работает только на первой кнопке, так как он принимает идентификатор.Как я могу заставить его работать на всех кнопках, которые генерируются динамически?

Answer 1

Как сказано в комментариях выше, у вас не должно быть нескольких идентификаторов на одной странице.Вместо этого вы можете использовать классы, но даже если это будет работать, есть лучший подход, который заключается в использовании data-attributes.

// Retrieves all your elements using the `data-like` attribute.
const likes = document.querySelectorAll('[data-like]');

// For each element as `el`
likes.forEach(el => {
  el.addEventListener('click', () => {

    // Get its `data-like` value.
    const { like } = el.dataset;

    // If the value is 'false':
    if (like === 'false') {
      el.innerText = 'Dislike';
      el.dataset.like = 'true';
      return;
    }

    // Else...
    el.innerText = 'Like';
    el.dataset.like = 'false';
  });
});

/* You can easily customize your elements according to their current state. */

.like[data-like="true"] {
  border: solid 1px green;
}

.like[data-like="false"] {
  border: solid 1px red;
}

<!-- Remove duplicate IDs and use `data-like` instead. -->
<button type="submit" class="btn btn-custom btn-sm like" data-like="false">Like</button>
<button type="submit" class="btn btn-custom btn-sm like" data-like="false">Like</button>