動態按鈕 ID - Javascript

Question

我有許多從 for 循環生成的按鈕，如下所示，id = 像：

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

我有一個腳本將“like”更改為“unlike”並將“unlike”更改為“like”，它通過Id獲取元素：

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

這僅在第一個按鈕上起作用，因為它采用了 id。 如何讓它在動態生成的所有按鈕上發揮作用？

Answer 1

正如上面的評論中所說，您不應該在同一頁面中有多個 ID。 您可以改用類，但即使它可以工作，也有更好的方法，即使用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>