Question

我不知道我是否还没有为此做好准备，或者答案很简单，但是我无法弄清楚如何创建由模态内的名称组成的唯一h4。我的目标是在点击后给每张用js创建的卡片一个具有唯一信息（例如（在我的情况中为Pokemon）：名称，类型，重量...）的唯一模态，但是在我的代码中，每张卡片都有要么来自最后一个口袋妖怪的相同信息，要么所有卡都具有彼此的信息。感谢社区提供的任何帮助。

模式：

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title" id="exampleModalLongTitle">give me unique name</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      Some information
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>

js：

const app = document.getElementById('root');
//const modal =document.getElementById("exampleModalLongTitle");
var request = new XMLHttpRequest();
const container = document.createElement('div');
container.setAttribute('class', 'container');
app.appendChild(container);
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

function firstPage(){
    request.open('GET', 'http://pokeapi.salestock.net/api/v2/pokemon/?limit=151', true);
    request.onload = function () {
        var data= JSON.parse(this.response);
        for(var i=0; i<151; i++){
            $("h4").html(" ");
            var k=i+1;
            const h5 = document.createElement('h5');
            var capital= capitalizeFirstLetter(data.results[i].name);
            h5.textContent = capital;
            const img = document.createElement("img");
            img.src = "pokemon/"+k+".png";
            const button = document.createElement("BUTTON");

            $("button").css("margin","1rem");
            $("button").css("borderRadius","12px");
            button.setAttribute("data-toggle","modal");
            button.setAttribute("data-target","#exampleModalCenter");
            $("h5").css("fontSize","1rem");
            $("h5").css("paddingTop","1rem");
            container.appendChild(button);
            button.appendChild(h5);
            button.appendChild(img);
            // var unique = document.createElement("h4");
            // unique.textContent=capital;
            // modal.appendChild(unique);
            $("h4").append(capital); 
        }
    };
    request.send();
}
firstPage();

如何在每张卡中创建唯一的h4？

0 个答案: