Question

我创建了一个用户可以添加到band成员中的表单。如果他们想要更多的乐队成员，则此字段旁边有一个“ +”选项，该行为他们提供了另一行以在其中添加另一个成员。

我正在努力弄清楚如何显示所有乐队成员，因为根据用户输入的数量会有不同的数量，但是每个成员都在对象中它自己的项目中。

已建议我嵌套项目，但我一直在努力使其工作。

/ *我的对象在MongoDB上的外观* /

_id: 5cff8150a9ba5988c4528346
jam_title: "BRUNT catch up 2"
genre: "Rock/Funk"
date_of_jam: "30 June, 2019"
jam_location: "Pirate Studios, Bristol"
jam_postcode: "BS5 0BJ"
jam_members: "Ed"
jam_instruments: "Drums"
jam_member_1: "Bruno"
jam_instrument_1: "Guitar"
jam_member_2: "Will"
jam_instrument_2: "Bass"
jam_notes: "Lock Jaw"

/ *在添加页面上的编码方式* /

<div class="row" id="members-section">
        <span class="input-field col s6">
            <input id="jam_member_1" name="jam_member_1" type="text">
            <label for="icon_prefix">Member Username</label>
        </span>
        <span class="input-field col s5">
            <input id="member_instrument_1" name="member_instrument_1" type="text">
            <label for="icon_prefix">Instrument</label>
        </span>
        <span class="input-field col s1">
            <a class="waves-effect waves-light btn" id="new-member_1" onclick="newMember()">+</i></a>
        </span>
    </div>

/ * newMember函数的外观* /

<script type="text/javascript">
    var i = 1;
    function newMember() {
        i++;
        console.log(i);
        document.getElementById("members-section").innerHTML += `<span class="input-field col s6">
            <input id="jam_member_${[i]}" name="jam_member_${[i]}" type="text">
            <label for="icon_prefix">Member Username</label>
        </span>
        <span class="input-field col s5">
        <input id="member_instrument_${[i]}" name="member_instrument_${[i]}" type="text">
            <label for="icon_prefix">Instrument</label>
        </span>
        <span class="input-field col s1">
            <a class="waves-effect waves-light btn" id="edit" onclick="newMember()">+</i></a>
        </span>`;

}
</script>

我希望某种for循环可以对此进行排序，但是我无法理解如何做到这一点。

努力显示mongoDB对象中的所有项目

0 个答案: