动态按钮 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>