时间戳

首页 > 解决方案 > For 循环创建太多按钮

javascript - For 循环创建太多按钮

问题描述

在我的对象数组中，每个人都有一组带有图像的信息。所有这些信息都在一个名为 imagebox 的 div 中。现在我想为数组中的每个人添加一个按钮。目前，我的代码正在创建多个按钮，而不是为数组中的每个对象创建一个按钮。我附上了一张图片来显示页面当前的样子。就像我的图像显示的那样，我在白色 div 之外还有多个按钮。我只希望每个人在那个白色 div 内有一个按钮，但我不明白我的 for 循环做错了什么。

这是我的图片：在此处输入图片描述

HTML

<body onload="printBtn();">
    <div id="selectmenu">
        <select id="gender" onchange="checkGender()">
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
    </div>

    <input type="text" id="search">    

    <div id="imagescontainer"></div>
    <div id="text"></div>
    <div id="imagebox"></div>
</body>

JAVASCRIPT 

    var people = [

         {
        title: "davisss1",
        name: "Jeslyn Davis",
        gender: "male",
        age: 25,
        profileDescription: "I recently moved from New York, I'm looking forward to meeting new people.",
        status: "Single",
        hasKids: "No",
        wantsKids: "No",
        religion: "Prefer not to say",
        typeOfRelationship: "Long-term",
        city: "Kansas City",
        state: "Missouri",
        favSport: "softball",
        favDrink: "coke",
        favIceCream: "cookies-n-cream",
        favFood: "gelato",
        favMusic: "pop",
        imgs: "images/jeslyn.jpeg"
    },
    {
        title: "chlogib",
        name: "Chloe Gibbs",
        gender: "female",
        age: 24,
        profileDescription: "I'm currently running my own bakery so if you're every in town and want to get a bite let me know. I also work part time ",
        status: "Single",
        hasKids: "No",
        wantsKids: "Yes",
        religion: "Nonreligious",
        typeOfRelationship: "Long-term",
        city: "Louisville",
        state: "Kentucky",
        favSport: "volleyball",
        favDrink: "ice-tea",
        favIceCream: "mango",
        favFood: "cookies",
        favMusic: "rock",
        imgs: "images/chloe.jpeg"
    }
        ]

function checkGender() {

    var genderSelected = document.getElementById("gender").value;
    var allimages = document.getElementById("imagescontainer");
    var text = document.getElementById("text");

    allimages.innerHTML = "";
    text.innerHTML = "";

    if (genderSelected == "male") {
        for (var i = 0; i < people.length; i++) {
            if (people[i].gender == "male") {
                var content = `<div id="imagebox">` + `<img src="` + people[i].imgs + `" id="allimages"/>` + `<div id="text">` + `Title: ` + people[i].title + `<br\>` + `Name: ` + people[i].name + `<br\>` + `Age: ` + people[i].age + `<br\>` + `Description: ` + people[i].profileDescription + `<br\>` + `Status: ` + people[i].status + `<br\>` + `Has kids: ` + people[i].hasKids + `<br\>` + `Want kids: ` + people[i].wantsKids + `<br\>` + `Religion: ` + people[i].religion + `<br\>` + `Type of relationship: ` + people[i].typeOfRelationship + `<br\>` + `City: ` + people[i].city + `<br\>` + `State:` + people[i].state + `<br\>` + `Favorite sport: ` + people[i].favSport + `<br\>` + `Favorite drink: ` + people[i].favDrink + `<br\>` + `Favorite ice-cream flavor: ` + people[i].favIceCream + `<br\>` + `Favorite food: ` + people[i].favFood + `<br\>` + `Favorite music: ` + people[i].favMusic + `<br\>` + `</div>` + `</div>`;
                allimages.innerHTML += content;
                text.innerHTML += content;          

                 function createButtons() {
                    for (var i = 0; i < people.length; i++) {
                        document.getElementById("imagebox").innerHTML += "<button>" + people[i] + "</button>";
                    }
                }
                createButtons();    
            }                     
        }        

    } else {
        for (var i = 0; i < people.length; i++) {
            if (people[i].gender == "female") {

                var content = `<div id="imagebox">` + `<img src="` + people[i].imgs + `"id="allimages"/>` + `<div id="text">` + `Title: ` + people[i].title + `<br\>` + `Name: ` + people[i].name + `<br\>` + `Age: ` + people[i].age + `<br\>` + `Description: ` + people[i].profileDescription + `<br\>` + `Status: ` + people[i].status + `<br\>` + `Has kids: ` + people[i].hasKids + `<br\>` + `Want kids: ` + people[i].wantsKids + `<br\>` + `Religion: ` + people[i].religion + `<br\>` + `Type of relationship: ` + people[i].typeOfRelationship + `<br\>` + `City: ` + people[i].city + `<br\>` + `State:` + people[i].state + `<br\>` + `Favorite sport: ` + people[i].favSport + `<br\>` + `Favorite drink: ` + people[i].favDrink + `<br\>` + `Favorite ice-cream flavor: ` + people[i].favIceCream + `<br\>` + `Favorite food: ` + people[i].favFood + `<br\>` + `Favorite music: ` + people[i].favMusic + `<br\>` + `</div>` + `</div>`;
                allimages.innerHTML += content;
                text.innerHTML += content;
 function createButtons() {
                    for (var i = 0; i < people.length; i++) {
                        document.getElementById("imagebox").innerHTML += "<button>" + people[i] + "</button>";
                    }
                }
                createButtons();
            }
        }
    }
}

标签： javascripthtml

解决方案

目前尚不清楚您希望按钮做什么，所以我现在只是将人名添加为文本。

我添加了一个codepen https://codepen.io/benwritescode/pen/BaNwoXB

HTML
我取消了多个 div，它们似乎对您的要求是多余的。

<html>
<head><!-- RE-ADD YOUR CSS&JS REFS --></head>
<body>
    <div id="selectmenu">
        <select id="gender" onchange="checkGender()">
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
    </div>

    <input type="text" id="search">    

    <div id="people"></div>
</body>

</html>

JS
我已经在 J​​S 的评论中解释了发生了什么。

let people = [
        {
            title: "davisss1",
            name: "Jeslyn Davis",
            gender: "male",
            age: 25,
            profileDescription: "I recently moved from New York, I'm looking forward to meeting new people.",
            status: "Single",
            hasKids: "No",
            wantsKids: "No",
            religion: "Prefer not to say",
            typeOfRelationship: "Long-term",
            city: "Kansas City",
            state: "Missouri",
            favSport: "softball",
            favDrink: "coke",
            favIceCream: "cookies-n-cream",
            favFood: "gelato",
            favMusic: "pop",
            imgs: "images/jeslyn.jpeg"
        },
        {
            title: "chlogib",
            name: "Chloe Gibbs",
            gender: "female",
            age: 24,
            profileDescription: "I'm currently running my own bakery so if you're every in town and want to get a bite let me know. I also work part time ",
            status: "Single",
            hasKids: "No",
            wantsKids: "Yes",
            religion: "Nonreligious",
            typeOfRelationship: "Long-term",
            city: "Louisville",
            state: "Kentucky",
            favSport: "volleyball",
            favDrink: "ice-tea",
            favIceCream: "mango",
            favFood: "cookies",
            favMusic: "rock",
            imgs: "images/chloe.jpeg"
        }
    ];

// This is the HTML template which will be used for each person.
const PERSONTEMPLATE = `
<div class="imagebox">
    <img src="[[IMAGE]]" image="images" />
    <div class="text">
        Title: [[TITLE]]<br>
        Name: [[NAME]]<br>
        Age: [[AGE]]<br>
        Description: [[DESCRIPTION]]<br>
        Status: [[STATUS]]<br>
        Has kids: [[HASKIDS]]<br>
        Want kids: [[WANTSKIDS]]<br>
        Religion: [[RELIGION]]<br>
        Type of relationship: [[LOOKINGFOR]]<br>
        City:[[CITY]]<br>
        State:[[STATE]]<br>
        Favorite sport: [[FAVSPORT]]<br>
        Favorite drink: [[FAVDRINK]]<br>

        Favorite ice-cream flavor: [[FAVICECREAM]]<br>
        Favorite food: [[FAVFOOD]]<br>
        Favorite music: [[FAVMUSIC]]<br>
    </div>
    <button>[[BUTTONTEXT]]</button>
</div>`;    

// Fired on-change
function checkGender() {

    // Get the selected gender
    let genderSelected = document.getElementById("gender").value;
    // get the div to add the html to.
    let peopleDiv = document.getElementById("people");

    // Create a variable to which each appropriately gendered persons' HTML will be added to.
    let htmlToBuild = '';

    // Get the people by the selected gender using filter(), then use forEach to loop through each person in the returned array.
    people
        .filter(person => person.gender == genderSelected)
        .forEach(function(person) {

            // Gets the template and replaces the placeholder snippets.
            // += appends to a string.
            htmlToBuild += PERSONTEMPLATE
                            .replace('[[IMAGE]]',person.imgs)
                            .replace('[[TITLE]]',person.title)
                            .replace('[[NAME]]',person.name)
                            .replace('[[AGE]]',person.age)
                            .replace('[[DESCRIPTION]]',person.profileDescription)
                            .replace('[[STATUS]]',person.status)
                            .replace('[[HASKIDS]]',person.hasKids)
                            .replace('[[WANTSKIDS]]',person.wantsKids)
                            .replace('[[RELIGION]]',person.religion)
                            .replace('[[LOOKINGFOR]]',person.typeOfRelationship)
                            .replace('[[CITY]]',person.city)
                            .replace('[[STATE]]',person.state)
                            .replace('[[FAVSPORT]]',person.favSport)
                            .replace('[[FAVDRINK]]',person.favDrink)
                            .replace('[[FAVICECREAM]]',person.favIceCream)
                            .replace('[[FAVFOOD]]',person.favFood)
                            .replace('[[FAVMUSIC]]',person.favMusic)
                            .replace('[[BUTTONTEXT]]',person.name);
        });

    // Add the new HTML to the div.
    peopleDiv.innerHTML = htmlToBuild;

}

这里的代码有很好的关注点分离并且可读。您可以更新您的 HTML 模板，而无需替换其中的任何值。没有重复的代码（男性 + 女性 for 循环），只有一个数组过滤器和一个 foreach。

推荐阅读