Question

我正在创建一个简单的pokedex以进行一些练习。我使用引导程序显示口袋妖怪的列表，每行6个。我使用过滤器功能过滤了神奇宝贝，并仅显示名称中包含图像中给定输入的神奇宝贝。

效果很好，但我想将结果压缩到尽可能少的行中，每行最多六个元素。换句话说，我想在蜥蜴旁边放一个“ chimchar”，然后继续，直到每行有六个项目为止。这是我的过滤器功能：

$(document).ready(function(){
    $("#pkmn").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#listPokemon *").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});

我的家在这里

   <!DOCTYPE html>
<html lang="en">
<head>
    <title>Calcolatore IV</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="../js/getListPokemonScript.js"></script>
    <script src="../js/searchRealTimeScript.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/home.css">
</head>
<body>
    <div class="jumbotron-fluid">
        <h1 align="center">Calcolatore IV USUM</h1>
        <p align="center"> Puoi utilizzare il seguente tool per calcolare le IV del tuo pokemon su SM e USUM </p>
    </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm"></div>
                <div class="col-sm">
                <div class="form-group">
                    <i class="fa fa-search" ></i>
                <label for="pkmn" align="center">Cerca il tuo Pokemon:</label>
                <input type="text" class="form-control" id="pkmn"  align="center">
                </div>
            </div>
                <div class="col-sm"></div>
            </div>
        </div>
    <div class="container-fluid" id="listPokemon"></div>

</body>
</html>

以下是创建列和行的脚本：

$(document).ready(function(){

    $('body').css('display', 'none');
    $('body').fadeIn(500);


});
$.getJSON("https://pokeapi.co/api/v2/pokemon/?limit=949", function (pokemonList) {

    for (i = 0; i < pokemonList.results.length; i=i+6) {

        var rowElement = document.createElement("div");
        rowElement.setAttribute("class","row");
        rowElement.setAttribute("id", "row" + i/6);

        $("#listPokemon").append(rowElement);

        for (j = i; j < i+6; j++) {
            var namePokemon = pokemonList.results[j].name;
            var col = document.createElement("div");
            col.setAttribute("class","col-sm-2");
            col.setAttribute("id",namePokemon);


            $("#row"+i/6).append(col);

                //create a card
                var card = document.createElement("div");
                card.setAttribute("class","card");

                card.setAttribute("id","card"+namePokemon);
                $("#"+namePokemon).append(card);


                //create card image
                var cardImage = document.createElement("img");
                cardImage.setAttribute("class","card-img-top");
                var url = pokemonList.results[j].url;
                var idPokemon = url.match(/\d/g);
                idPokemon.shift();
                idPokemon = idPokemon.join("");
                cardImage.setAttribute("src","../Sprites/"+idPokemon+".png");
                $("#card"+namePokemon).append(cardImage);

                //create card body

                var cardBody = document.createElement("div");
                cardBody.setAttribute("class","card-body");
                cardBody.setAttribute("id","body"+namePokemon);
                $("#card"+namePokemon).append(cardBody);

                // create card title


                $("#body"+namePokemon).append("<h6 class='card-title'  style='text-align: center'>" + namePokemon.toString().toUpperCase()+"</h6>");

        }

    }

})

感谢您的帮助。

Answer 1

您只需要一行，并且列将基于“ col-sm-2”自动换行-因此，请在for循环外创建行，如第一个代码片段所示（我注释掉了现有逻辑），并始终附加外排的列（第二个代码段）： https://jsfiddle.net/gpmnj957/3/

var rowElement = document.createElement("div");
    rowElement.setAttribute("class","row");
    rowElement.setAttribute("id", "rowThatWraps")

for (i = 0; i < pokemonList.results.length; i=i+6) {

    //var rowElement = document.createElement("div");
    //rowElement.setAttribute("class","row");
    //rowElement.setAttribute("id", "row" + i/6);

第二个代码段：

$("#rowThatWraps").append(col);
//$("#row"+i/6).append(col);

根据引导中输入的内容动态地对列进行重新排序

1 个答案: