使用 JavaScript 或 alpineJS 创建重复的表单元素

Question

有没有办法在不使用 document.write 甚至 jQuery 的情况下，用食物数组的每个元素替换 rice 来复制 HTML 内容？ innerHTML 是唯一的出路吗？也许这可以使用像 alpineJS 这样的反应库来实现？（我不能使用 npm 等）

let food = ['rice', 'wheat', 'ragi', 'maida', 'red gram dhal', 'black gram dhal', 'bengal gram', 'horse gram', 'drumstick leaves', 'cabbage', 'manathakali', 'curry leaves', 'carrot', 'beetroot', 'potato', 'yam', 'Beans', 'brinjal', 'cauliflower', 'ladies finger', 'bitter gourd', 'tomato', 'apple', 'banana', 'grapes', 'guava', 'orange', 'cow milk', 'curd', 'butter milk', 'ghee', 'butter', 'paneer', 'chicken', 'mutton', 'egg', 'fish', 'almond', 'cashew nut', 'sesame', 'ground nut', 'coconut', 'coconut oil', 'sunflower oil', 'gingelly oil', 'groundnut oil', 'palm oil', 'sugar', 'jaggery', 'honey'];

<div class="form-group row">
    <label for="what-beverage" class="col-sm-4 col-form-label">Rice</label>
    <div class="col-sm-8 mt-2">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="rice" id="rice-daily" value="daily" />
            <label class="form-check-label" for="rice-daily">Daily</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="rice" id="rice-weekly" value="weekly" />
            <label class="form-check-label" for="rice-weekly">Weekly</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="rice" id="rice-fortnightly" value="fortnightly" />
            <label class="form-check-label" for="rice-fortnightly">Fortnightly</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="rice" id="rice-occasionally" value="occasionally" />
            <label class="form-check-label" for="rice-occasionally">Occasionally</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="rice" id="rice-never" value="never" />
            <label class="form-check-label" for="rice-never">Never included</label>
        </div>
    </div>
</div>

Answer 1

使用 Alpine.js 你可以这样做（假设你想要每个频率和食物的频率单选按钮）：

<script>
  const foods = [{
    label: 'Rice',
    value: 'rice'
  }, {
    label: 'Wheat',
    value: 'wheat'
  }, 
    // so on for each food
  ];
  const frequencies = [{
    value: 'daily',
    label: 'Daily'
  }, {
    value: 'weekly',
    label: 'Weekly'
  }, {
    value: 'fortnightly',
    label: 'Fortnightly'
  }, {
    value: 'occasionally',
    label: 'Occasionally'
  }, {
    value: 'never',
    label: 'Never'
  }];
</script>
<div x-data="{ foods: foods, frequencies: frequencies }" class="form-group row">
  <div class="col-sm-8 mt-2">
    <template x-for="food in foods">
      <div>
        <label for="what-beverage" class="col-sm-4 col-form-label" x-text="food.label"></label>
        <template x-for="frequency in frequencies">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" x-bind:name="food.value" x-bind:id="`${food.value}-${frequency.value}`" x-bind:value="frequency.value" />
            <label class="form-check-label" x-bind:for="`${food.value}-${frequency.value}`" x-text="frequency.label"></label>
          </div>
        </template>
      </div>
    </template>
  </div>
</div>

我有一个可用的代码笔，你可以在 https://codepen.io/hugodf/pen/yLaRXvm

查看

使用 JavaScript 或 alpineJS 创建重复的表单元素

Create repetitive form elements using JavaScript or alpineJS

javascript

alpine.js