有父母和亲戚的问题

Question

我的代码有问题，希望您能为我提供帮助。

我有一个表格，在该表格中，您必须选择磁盘的最大大小和相对磁盘的编号。每个磁盘号的总和不能大于相对磁盘的大小。 （请查看图片）

我尝试了很多事情，但是我遇到了表格（类，查询等）的问题。

function check_number23() {
  let ProjectName = document.getElementById("resultsprojectname").innerHTML;

  var sizediskN1 = document.getElementsByClassName("sizediskN1");


  var value = Object.keys(sizediskN1).length;

  var disksizeN = document.getElementsByClassName("disksizeN");
  var disksizeNkey = Object.keys(disksizeN).length;



  for (var h = 0; h < value; h++) {
    var storagevalue = +sizediskN1[h].value;
  }
  alert(storagevalue);



  for (var j = 0; j < disksizeNkey; j++) {
    var storagemax = document.getElementsByClassName("disksizeN")[j].value;

    if (storagevalue - storagemax <= 0) {
      result = storagevalue + " GiB of Standard Partitions can be used.";
      document.getElementsByClassName("negativenumberchecker23")[h].innerHTML = result;
    } else {
      result = storagevalue + " GiB of Standard Partitions can't be used. Insert a new value.";
      alert(result);
      sizediskN1[h].value = '0';
    }
  }
}

<label>Disk Size (GiB)</label> <input class="form-control disksizeO" type='number' min="1" onchange="check_numberDSKSizeO(this)" name='disksizeO[]' oninput="validity.valid||(value='0');" value='0' />
<label>Size (GiB):</label>
<input type='number' min="0" oninput="validity.valid||(value='0' onchange=" check_number23(this) " name='sizediskN1[]'  class='sizediskN1 form-control'>

我希望我的问题很清楚...请帮助。

Answer 1

这里有一个小片段，用于检查两个磁盘中的值，并将它们与可用的磁盘总空间进行比较。

请注意，必须对其进行修改以与任何数量的大小输入和任何数量的磁盘一起使用。

const inpDiskSize = document.getElementById('disk-size')
const inpSize1 = document.getElementById('size1')
const inpSize2 = document.getElementById('size2')
let checkDisplay = true

// checking values and returning TRUE/FALSE
const checkValues = (dSize, sizeArr) => {
  return dSize >= sizeArr.reduce((a, c) => a + c, 0)
}

// transforming data from UI to the checking function
const changeEvent = (inpDiskSize, inpSizeArr) => {
  return checkValues(inpDiskSize.value, inpSizeArr.map(e => Number(e.value) || 0))
}

// displaying text
const displayText = (d) => {
  let r = ''
  if (d) {
    r = "You can have these partitions."
  } else {
    r = "You can NOT have these partitions."
  }
  document.getElementById('checkDisplay').textContent = r
}

// change event listener registrations
inpDiskSize.addEventListener('change', function(e) {
  displayText(changeEvent(inpDiskSize, [inpSize1, inpSize2]))
})
inpSize1.addEventListener('change', function(e) {
  displayText(changeEvent(inpDiskSize, [inpSize1, inpSize2]))
})
inpSize2.addEventListener('change', function(e) {
  displayText(changeEvent(inpDiskSize, [inpSize1, inpSize2]))
})

<label>Disk Size (GiB)</label>
<input id="disk-size" class="form-control disksizeO" type='number' min="1" name='disksizeO[]' oninput="validity.valid||(value='0');" value='0' />
<br />
<label>Size1 (GiB):</label>
<input id="size1" type='number' min="0" oninput="validity.valid||(value='0')" name='sizediskN1[]' class='sizediskN1 form-control' />
<br />
<label>Size2 (GiB):</label>
<input id="size2" type='number' min="0" oninput="validity.valid||(value='0')" name='sizediskN1[]' class='sizediskN1 form-control' />
<br />
<br />
<div id="checkDisplay"></div>

编辑

我建议应该/应该以不同的方式解决。

以下是代码段：

const msgArr = [
  'You can NOT have this configiration',
  'You can have this configiration'
]

// array of disk objects
const disks = [{
  diskId: 0,
  maxSize: 5,
  rels: [{
    size: 1
  }, {
    size: 2
  }],
  msg: 'You can have this configiration'
}, {
  diskId: 1,
  maxSize: 3,
  rels: [{
    size: 3
  }, {
    size: 4
  }],
  msg: 'You can NOT have this configiration'
}]

// displaying the disks (creating an HTML template and
// appending it to the DOM)
function render(disks) {
  let html = ''
  disks.forEach(disk => {
    html += `<h4>DISK ${disk.diskId}</h4>`
    html += `<label for="disk-${disk.diskId}">disk-${disk.diskId}<input id="disk-${disk.diskId}" class="size-input" data-diskId="${disk.diskId}" type="number" value="${disk.maxSize}"/></label><br />`
    disk.rels.forEach((rel, i) => {
      const relId = `disk-${disk.diskId}-rel-${i}`
      html += `<label for="${relId}">${relId}<input id="${relId}" class="disk-rel size-input" data-diskId="${disk.diskId}" data-relId="${i}" type="number" value="${rel.size}"/></label><br />`
    })
    html += '<br />'
    html += `<div class="message">${disk.msg}</div>`
    html += '<br />'
  })
  document.getElementById('disksContainer').innerHTML = html
  addEventListenersToInputs('.size-input')
}

// rendering the disks first time
render(disks)

// adding event listeners to input fields
function addEventListenersToInputs(selector) {
  const inputs = document.querySelectorAll(selector)
  inputs.forEach(e => {
    e.addEventListener('change', function(e) {
      const diskId = this.getAttribute('data-diskId')
      updateValues(diskId, disks)
      render(disks)
    })
  })
}

// checking a single disk
function checkValue(disk) {
  return disk.rels.reduce((a, c) => a + Number(c.size), 0) <= disk.maxSize
}

// mutate the disks object
function updateValues(diskId, disks) {
  const els = document.querySelectorAll(`[data-diskId="${diskId}"]`)
  const disk = disks.find(e => {
    return Number(e.diskId) === Number(diskId)
  })

  els.forEach(el => {
    if (el.getAttribute('id') === `disk-${disk.diskId}`) {
      disk.maxSize = el.value
    } else {
      disk.rels[Number(el.getAttribute('data-relId'))].size = el.value
    }
  })
  disk.msg = msgArr[Number(checkValue(disk))]
}

<div id="disksContainer"></div>

与先前解决方案的主要区别在于，磁盘是在DOM中设置的注释集，但是它们被“保留”在对象的JavaScript数组中。显示的HTML是附加在DOM上的JS“模板”-您可以更轻松地进行更改（但是JS并未与DOM完全脱钩）。

此解决方案适用于包含任意数量的相关分区的任意数量的磁盘。

该代码可能比第一个解决方案要长一些，并且似乎更复杂，但这是因为HTML放在JS中，并且它必须能够使用多个/任意数量的磁盘。

编辑2

然后有一个完全不同的地方：现代的JS框架。

VueJS

Vue.component('disk', {
  props: ['disk'],
  data() {
    return {
      valid: 1,
      msg: [
        'You can NOT have this configuration.',
        'You can have this configuration.'
      ]
    }
  },
  template: `
    <div>
      <button @click="$emit('remove-disk', disk.id)">REMOVE DISK</button><br />
      <input type="number" :value="disk.maxSize" @change="setValue($event.target.value, 0)"/><button @click="addRel()">Add rel</button><br />
      <div :key="rel.id" v-for="rel in disk.rels">
        <input type="number" :value="rel.size" @change="setValue($event.target.value, rel.id)"/><button @click="removeRel(disk.id, rel.id)">REMOVE THIS REL</button>
      </div><br />
      {{msg[valid]}}
    </div>`,
  methods: {
    setValue(val, relId) {
      const emitVal = {
        val: val,
        diskId: this.disk.id,
        relId: relId
      }
      this.$emit('set-value', emitVal)
      this.valid = this.checkValues()
    },
    checkValues() {
      return Number(this.disk.rels.reduce((a, c) => {
        return a + Number(c.size)
      }, 0) <= this.disk.maxSize)
    },
    addRel() {
      this.$emit('add-rel', this.disk.id)
    },
    removeRel(diskId, relId) {
      this.$emit('remove-rel', {
        diskId,
        relId
      })
      this.valid = this.checkValues()
    }
  }
})


new Vue({
  el: "#app",
  data: {
    disks: []
  },
  methods: {
    addDisk() {
      const newDisk = {
        id: Date.now(),
        maxSize: 0,
        rels: []
      }
      this.disks.push(newDisk)
    },
    addRel(id) {
      this.disks.find(e => e.id === id)
        .rels.push({
          id: Date.now(),
          size: 0
        })
    },
    removeDisk(id) {
      this.disks = this.disks.filter(e => e.id !== id)
    },
    removeRel({
      diskId,
      relId
    }) {
      const disk = this.disks.find(e => e.id === diskId)
      disk.rels = disk.rels.filter(e => e.id !== relId)
    },
    setValue({
      val,
      diskId,
      relId
    }) {
      const disk = this.disks.find(e => e.id === diskId)
      if (relId === 0) {
        disk.maxSize = val
      } else {
        const rel = disk.rels.find(e => e.id === relId)
        rel.size = val
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button @click="addDisk">ADD DISK</button>
  <div v-for="disk in disks">
    <disk :key="disk.id" :disk="disk" @add-rel="addRel($event)" @set-value="setValue($event)" @remove-disk="removeDisk($event)" @remove-rel="removeRel($event)" />
  </div>
</div>

这是完全动态的（（OK，没有删除的项目）：处理具有任意数量的分区的任意数量的磁盘。

编辑3

我添加了删除磁盘和删除rel函数-如下面的注释所要求。