Question

我在流星上工作，并试图在选中复选框时显示代码块。我是JS和jquery的新手，但是我研究了编写JS的不同方法。这是我想出的：

<div class="recipient">
      <div class="toRecipient-container">
        <label class="toRecipient">TO:</label>
        <input class="toRecipient" type="text" size="45">
      </div>
        <br>
      <div id="checkbox-container" class="checkbox-container">
        <label for="newClient">New Client
        <input id="newClient" class="newInfo" type="checkbox" onclick="toggle()"></label>
        <label for="newBilling" style="padding-left: 20px;">New Billing
        <input id="newBilling" class="newInfo" type="checkbox"></label>
      </div>
    </div>
    <div id="billingDetails-container" class="billingDetails-container">
      <div class="billingDetails">
          <label>Billing Contact:</label>
          <input class="billingContact" type="text" size="45">
          <label>Billing Phone:</label>
          <input class="billingPhone" type="text" size="45">
        <div>
          <label>Billing Address:</label>
          <input class="billingAddress" type="text" placeholder="Street Address" size="45">
          <input class="billingAddress" type="text" placeholder="City" size="45">
          <input class="billingAddress" type="text" placeholder="State" size="45">
          <input class="billingAddress" type="text" placeholder="Zip Code" size="45">
        </div>
        <label>Billing Email:</label>
        <input class="billingEmail" type="text" size="45">
      </div>
    </div>

还有我的JS：

    Template.InvoicePage.onCreated(function () {
  this.state = new ReactiveVar();
});

Template.InvoicePage.helpers({
  toggle: ()=>{
    var checkBox = document.getElementById("newClient");
    var displayBlock = document.getElementById("billingDetails-container");
    if (checkBox.checked == true) {
      displayBlock.style.display = "block";
    } else {
      displayBlock.style.display = "none";
    }
  },
});

Template.InvoicePage.events({
  'change #newClient'(event, instance) {
    instance.state.set('newClient', event.target.checked)
  },
});

当我选中此框时，我收到一个错误，指出“ toggle”未定义。这应该是模板事件，而不是辅助事件吗？我想念什么？

Answer 1

我从没做过流星。网站上列出了许多不同的框架。我不确定您使用哪一个（如果有）。您不可能同时使用angular，react和vuejs。

除非我错了，并且整个情况有一个特殊的原因

Template.InvoicePage.helpers({...});

简单地做

function toggle() {
    var checkBox = document.getElementById("newClient");
    var displayBlock = document.getElementById("billingDetails-container");
    if (checkBox.checked == true) {
        displayBlock.style.display = "block";
    } else {
        displayBlock.style.display = "none";
    }
}

它与框架无关。只是普通的javascript和html。

在流星中选中时，复选框不显示元素

1 个答案: