Question

目前我有一个生成数组的JavaScript文件：

var express = require('express');
var router = express.Router();
var adb = require('./adb.js');

router.get('/', function(req, res, next) {
    adb.devices().then(function(devices) {
        var promises = new Array();
        for (var i = 0; i < devices.length; i++){
            promises.push(adb.checkBattery(devices[i]));
        }
        Promise.all(promises).then(function(availableDevices) {
            res.render('devices', {output: 'Available Devices: ' + availableDevices});
        });
    });
});

module.exports = router;

如何检索此数组，然后为每个元素创建一个复选框，然后将其显示在网页上？我的index.ejs文件看起来像这样，我希望将动物清单替换为数组返回的设备名称。

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<% include templates/header.ejs %>
<h1><%= title %></h1>

<fieldset>
  <legend>Available Devices</legend>
  <input type="checkbox" name="animal" value="Cat" />Cats <br />
  <input type="checkbox" name="animal" value="Dog" />Dogs<br />
  <input type="checkbox" name="animal" value="Bird" />Birds<br />
</fieldset>
<br>
<fieldset>
  <legend>Enter Parameter</legend>
  <input type="text" id="parameter" placeholder="e.g. id=com.cmplay.tiles2">
</fieldset>
<br>
<fieldset>
  <legend>Select Test</legend>
  <button id="devices" class="float-left submit-button" >Display Devices</button>
  <button id="openApp" class="float-left submit-button" >Open Application</button>
  <button id="closeApp" class="float-left submit-button" >Close Application</button>
  <button id="openBrowser" class="float-left submit-button" >Open Browser</button>
  <button id="closeBrowser" class="float-left submit-button" >Close Browser</button>
  <button id="pull" class="float-left submit-button" >Pull File</button>
  <button id="push" class="float-left submit-button" >Push File</button>
  <button id="install" class="float-left submit-button" >Install Application</button>
  <button id="uninstall" class="float-left submit-button" >Uninstall Application</button>
</fieldset>

<script type="text/javascript">
    var test = document.getElementById("test");
    var method = document.getElementById("method");
    var parameter = document.getElementById("parameter");
    var device = document.getElementById("myButton1");
    document.getElementById("devices").onclick = function () {
        location.href =  "devices?" + "&" + parameter.value;
    };
    document.getElementById("openApp").onclick = function () {
        location.href = "openApp?" + "&" + parameter.value;
    };
    document.getElementById("closeApp").onclick = function () {
        location.href = "closeApp?" + "&" + parameter.value;
    };
    document.getElementById("openBrowser").onclick = function () {
        location.href = "openBrowser?" + "&" + parameter.value;
    };
    document.getElementById("closeBrowser").onclick = function () {
        location.href = "closeBrowser?" + "&" + parameter.value;
    };
    document.getElementById("pull").onclick = function () {
        location.href = "pull?" + "&" + parameter.value;
    };
    document.getElementById("push").onclick = function () {
        location.href = "push?" + "&" + parameter.value;
    };
    document.getElementById("install").onclick = function () {
        location.href = "install?" + "&" + parameter.value;
    };
    document.getElementById("uninstall").onclick = function () {
        location.href = "uninstall?" + "&" + parameter.value;
    };
</script>

</body>
</html>

Answer 1

在fieldset内创建一个容器来保存您的复选框

  <fieldset>
    <legend>Available Devices</legend>
    <div id='devices'>
      <input type="checkbox" name="animal" value="Cat" />Cats <br />
      <input type="checkbox" name="animal" value="Dog" />Dogs<br />
      <input type="checkbox" name="animal" value="Bird" />Birds<br />
    </div>
  </fieldset>

遍历您的数组并为每个项添加一个复选框

var express = require('express');
var router = express.Router();
var adb = require('./adb.js');

router.get('/', function(req, res, next) {
    adb.devices().then(function(devices) {
        var promises = new Array();
        for (var i = 0; i < devices.length; i++){
            promises.push(adb.checkBattery(devices[i]));
        }
        Promise.all(promises).then(function(availableDevices) {
            res.render('devices', {output: 'Available Devices: ' + availableDevices});
        });
        //CREATE YOUR CHECKBOXES
        var container = document.getElementById('devices');
        for (var i in promises) {
          //GET YOUR DEVICE OBJECT
          var device = promises[i];
          //CREATE THE CHECKBOX
          var checkbox = document.createElement('input');
          checkbox.type = "checkbox";
          checkbox.name = "name"; //GET NAME FROM YOUR OBJECT
          checkbox.value = "value"; //GET VALUE FROM YOUR OBJECT
          checkbox.id = "id"; //GET ID FROM YOUR OBJECT
          //CREATE THE LABEL
          var label = document.createElement('label')
          label.htmlFor = "id"; //GET ID FROM YOUR OBJECT
          label.appendChild(document.createTextNode('Label Text Here'));
          //ADD THE CHECKBOX AND LABEL TO THE CONTAINER
          container.appendChild(checkbox);
          container.appendChild(label);
        }
    });
});

module.exports = router;

从返回的数组创建一个复选框列表

1 个答案: