JQuery - 更改每个 loadTemplate() 的输入名称答案

【问题标题】：JQuery - changing name of input for every loadTemplate()JQuery - 更改每个 loadTemplate() 的输入名称
【发布时间】：2018-04-04 16:25:10
【问题描述】：

这是我想在每次单击按钮时呈现的模板：

<script id="hidden-template" type="text/html">
<div id="order-container">
    <div class="form-group ">
        <input class="form-control name" placeholder="Name" type="text">
    </div>
    <div class="form-group ">
        <ul class="food" style="list-style-type: none; display:inline-block;">
            <li><label><input value="burger" type="radio" class="burger" data-name="food">Burger</label></li>
            <li><label><input value="chicken" type="radio" class="chicken" name="food">Chicken</label></li>
            <li><label><input value="falafel" type="radio" class="falafel" name="food">Falafel</label></li>
            <li><label><input value="fries" type="radio" class="fries" name="food">Fries</label></li>
        </ul>
        <ul class="veggies" style="list-style-type: none; display:inline-block;">
            <li><label><input type="checkbox" class="lettuce" name="veggie">Lettuce</label></li>
            <li><label><input type="checkbox" class="tomato" name="veggie">Tomato</label></li>
            <li><label><input type="checkbox" class="cucumber" name="veggie">Cucumber</label></li>
            <li><label><input type="checkbox" class="onion" name="veggie">Onion</label></li>
        </ul>
        <ul class="sauces" style="list-style-type: none; display:inline-block;">
            <li><label><input type="radio" class="XSpice" name="sauce">Extra Spicy</label></li>
            <li><label><input type="radio" class="spice" name="sauce">Spicy</label></li>
            <li><label><input type="radio" class="mild" name="sauce">Mild</label></li>
            <li><label><input type="radio" class="noSpice" name="sauce">No Spice</label></li>
        </ul>
    </div>
</div>

在第一个列表的第一个列表项上，我正在尝试为每个模板添加一个自定义名称，这样当您加载新模板时，它不会影响该模板中的所有其他输入，因为它具有不同的姓名。

这里是我渲染它的地方：

$("#app").loadTemplate($("#hidden-template"), {
    food: "TESTING"
})

但是当我 console.log 输入的名称时，它返回未定义。没有数据名称这样的东西吗？我似乎找不到一些好的文档，因为我认为它是因为它是 JQuery 的插件。每次加载模板时如何更改输入的名称？还是有更好的方法可以做到这一点？

【问题讨论】：

标签： jquery jquery-templates

【解决方案1】：

试试这个怎么样？

$("li").first().attr('data-name') = "TESTING";

【讨论】：

对不起，我句子中的措辞不好，我想说我想为第一个名称应用不同的名称只是为了问题的简单性，但在我的应用程序中我想要一个特殊的每组输入的名称。（例如 food1, food2, veggie1, veggie2）以便无线电输入不会干扰其他模板无线电
最后提交的数据如何？ HTML表单提交还是Javascript？建议：我建议生成与开始时不同的列表，而不是稍后尝试编辑它们。
它是通过 JavaScript 实现的。生成不同的列表是什么意思？这不就是我现在正在做的吗？生成一个新模板，对每个模板进行少量修改。