时间戳

首页 > 解决方案 > 使用 JavaScript 或 alpineJS 创建重复的表单元素

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

问题描述

有没有办法在不使用 document.write 甚至 jQuery 的情况下，用 food 数组的每个元素替换 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>

标签： javascriptalpine.js

解决方案

使用 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>

我有一个可用的 codepen，您可以在https://codepen.io/hugodf/pen/yLaRXvm查看

推荐阅读