Js附加一个变化的索引

我有一个输入组,当点击 “添加 “按钮时,我希望输入组将被翻倍,但输入的名称应该通过发送至函数addfunction().输入组的索引来改变。

<div class="col-md-10" id="ingr">
        <div class="input-group" id="elem">
            <span class="input-group-addon">Category</span>
            <select class="form-control" id="category">
                @foreach (var item in ViewBag.types)
                {
                    <option value="@item.id">@item.name</option>
                }
            </select>

            <span class="input-group-addon">Item</span>
            <select class="form-control valid item" id="item" name="cons[0].fooditemId">
                @foreach (var item in ViewBag.items)
            {
                    <option value="@item.id">@item.name</option>
                }
            </select>

            <span class="input-group-addon">Amount</span>
            <input  class="form-control" name="cons[0].amount"/>
            <span class="input-group-addon">Amount unit</span>
            <select class="form-control valid item" id="item" name="cons[0].amounttypeId">
                @foreach (var item in ViewBag.amountType)
            {
                    <option value="@item.id">@item.name</option>
                }
            </select>
            <div class="input-group-btn">
                <a href="#" class="btn btn-success" onclick="addfunction(0)">Add</a>
            </div>
        </div>
    </div>

到目前为止,这是我所做的。

function addfunction(index) {
    var $elem = $('#elem').clone();
    $('#ingr').append($elem);
    alert("test");
}

我不想单独做,也不想让它成为可能。

解决方案:

这里需要做很多工作,主要是你需要调整你的方法。所以我将给你解决你的问题的方向,但你需要自己尝试解决。

你将模仿(在某种程度上)其他前端框架。

你将首先需要保存 elem div作为一个字符串,并为你的索引值添加占位符。然后创建一个函数来追加该字符串,同时替换索引占位符。然后,你将需要一个全局索引变量来标识你所处的位置。addfunction 被点击了。

EDIT:连接

'<a href="#" class="btn btn-success" onclick="addfunction(' + index + ')">Add</a>'

插值

`<a href="#" class="btn btn-success" onclick="addfunction(${index})">Add</a>`

在使用JS插值时要注意使用`而不是单引号’。

给TA打赏
共{{data.count}}人
人已打赏
未分类

Spring Boot ThreadPoolTaskExecutor内存泄漏。

2022-9-8 2:23:18

未分类

在WebStorm中,通过断言的测试失败。

2022-9-8 2:23:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索