编辑

Question

我正在制作一个Marvel API项目。我添加了一个“喜欢”按钮，以便可以计算喜欢次数，但是每次我单击任何一个“喜欢”按钮时，唯一添加数字的计数器就是第一个。谁能告诉我如何正确执行此操作？

问题是因为ID是由for制造的，那么我该如何解决呢？

这是我的JS代码（在我项目的js文件中）：

success: function(data)
{
    footer.innerHTML = data.attributionHTML;
    var string = "";
    string += "<div class='row'>";

    for (var i = 0; i < data.data.results.length; i++)
    {
        var element = data.data.results[i];                   
        string += '<div class="col-md-3" align="center">';                 
        string += "<img src='" + element.thumbnail.path + "/portrait_fantastic." + element.thumbnail.extension + "'/>";                       
        string += '<button class="btn btn-success" onClick="testo()"><i class="fas fa-thumbs-up"></i> | <a id="likes">0</a></button>';
        string += "<h3>" + element.title + "</h3>";                                                  
        string += "</div>";

        if ((i + 1) % 4 == 0) 
        {
            string += "</div>";
            string += "<div class='row'>";
        }
    }

    marvelContainer.innerHTML = string;
}

这是我的onclick函数（它在我的html文件中，因为它不适用于我的js文件）

<script>
var likes=0;
function testo()
{
    likes += 1;
    document.getElementById("likes").innerHTML = likes;
}
</script>

Answer 1

这是因为所有按钮都是使用相同的id="likes"生成的，然后您使用document.getElementById("likes").innerHTML = likes;来更改HTML 为了使代码正常工作，您将需要使用其他方法，可能需要在按钮上添加data- *属性，然后使用.getAttribute('data-id-something').innerHTML而不是document.getElementById("likes").innerHTML通过data- *属性来更改赞。甚至在这种情况下甚至更好，您可以为按钮指定一个类名，并使用以下命令进行处理：document.getElementsByClassName("like-btn")

您可以在此示例中检查最后一个选项：

 	var init = function(data){
                var string ="";
                string += "<div class='row'>";
                for(var i = 0; i<4; i++)
                {
                    // var element = data.data.results[i];                   
                    string += '<div class="col-md-3" align="center">';                 
                    string += "<img src='/portrait_fantastic.jgeg'/>";                       
                    string += '<button class="btn btn-success" onClick="testo('+i+')"><i class="fas fa-thumbs-up"></i> | <span class="like-btn">0</span></button>';
                    string += "<h3>Element title</h3>";                                                  
                    string += "</div>";                   
                    if((i+1) % 4 ==0) 
                    {
                        string += "</div>";
                        string += "<div class='row'>";
                    }
                }
                document.getElementById("marvelContainer").innerHTML = string;
            }
            init();

<script>
var likes=0;
function testo(id) {      
        var btn = document.getElementsByClassName("like-btn");
        likes = parseFloat(btn[id].innerHTML);
        likes += 1;
        btn[id].innerHTML = likes;
    }
</script>

<div id="marvelContainer"></div>

我希望它将对您有帮助...

Answer 2

给按钮一个类，因为这将被单击。
将链接元素更改为跨度。在按钮中包含链接没有多大意义，因为您不能“不”单击按钮并单击链接。
删除了链接的内联onclick，并在所有按钮上按逻辑添加了事件侦听器。
点击逻辑在按钮中找到嵌套范围
- 它使用跨度上的data属性，将其变成整数，然后递增
- 然后更新下次点击的数据属性值
- 最后，它更新了用户可以看到的可见文本

编辑

对其进行了更改，以在跨度上绑定click事件监听器，并在click事件上停止传播。实际上，单击跨度会导致click事件注册跨度，而不是按钮。

// fake out some data for the element generation
var data = { data: {
  results: [
    { thumbnail: { path: '/path1', extension: 'jpg', title: 'Element1' } }
    ,{ thumbnail: { path: '/path2', extension: 'png', title: 'Element2' } }
    ,{ thumbnail: { path: '/path3', extension: 'gif', title: 'Element3' } }
  ]
} };
// fake out the container the elements are built to
var marvelContainer = document.querySelector('#container');

var string = "<div class='row'>";

for (var i = 0; i < data.data.results.length; i++) {
  var element = data.data.results[i];
  string += '<div class="col-md-3" align="center">';
  string += "<img src='" + element.thumbnail.path + "/portrait_fantastic." + element.thumbnail.extension + "'/>";
  // put a class on the button
  // also removed the id and inline onclick
  // change the id on the link to a class
  // also initialized the data-likes on the link to zero
  string += '<button class="btn btn-success likes-button"><i class="fas fa-thumbs-up"></i> | <span class="likes" data-likes="0">0</span></button>';
  string += "<h3>" + element.title + "</h3>";
  string += "</div>";

  if ((i + 1) % 4 == 0) {
    string += "</div>";
    string += "<div class='row'>";
  }
}

marvelContainer.innerHTML = string;

document.querySelectorAll('.likes-button, .likes').forEach(function(likeButton){
  likeButton.addEventListener('click', incrementLikes);
});

function incrementLikes (e) {
  e.stopPropagation();
  
  // find the inner likes element of the button
  var likes = e.target.querySelector('.likes') || e.target;

  // increment the likes
  var incrementedLikes = parseInt(likes.dataset.likes) + 1;

  // update the data attribute for next click, and update the text
  likes.dataset.likes = incrementedLikes.toString();
  likes.innerText = incrementedLikes;
}

<div id="container">
</div>

如何使此点击计数器正常工作？

2 个答案:

编辑