从由API调用中的对象组成的列表中创建按钮

时间:2018-07-05 22:01:15

标签: jquery html json twitter-bootstrap drop-down-menu

我的网站上有一个版块可以放置一个下拉列表。我用来自API调用的对象填充了列表。

当我尝试基于列表中的每个国家/地区创建按钮时,无论以h1标签格式选择哪个国家/地区,它都会附加“丹麦”。

JQuery:

for (var i=0; i< results.length; i++){
            //console.log(results[i].country);
            var countryList = $("#your-team");
            var newList = $("<li><a class='dropdown-item teamselect' id = '" + results[i].fifa_code + "' href='#follow-teams'>"+ results[i].country + "</a></li>");

            countryList.append(newList);

            var fifaCode = results[i].fifa_code;
            var fifaCodePound = "#" + fifaCode;
            console.log(fifaCodePound);
            var teamInfo = $("#teaminfo");
            var teamTitle = $("#teampagetitle");
            var teamStat = $(
                "<h1>" + results[i].country + "</h1> <span> Wins: " + results[i].wins 
                + "</span><br><span> Losses:" + results[i].losses + "</span>"
            );

            $(newList).on("click", function(event) {
                    //teamTitle.append("<h1>" + results[i].country + "</h1>");
                    teamInfo.append(teamStat);
                    $("#placeholder").style("height: auto;")

HTML

<section id = "follow-teams">
            <div class="container">
                <div class= "row">

                    <div class="dropdown">
                        <h1>Follow your favorite teams</h1>
                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select a Team to Follow
                        <span class="caret"></span></button>
                        <div id="your-team" class="dropdown-menu team-dropdown">
                            <!-- <li id="your-team"></li> -->
                        </div>

                        <div id = "teaminfo"></div>
                    </div>
                </div>
                <br>
                    <div class="row">
                        <div class="team-buttons"></div>
                    </div>

0 个答案:

没有答案