如何在 Meteor 中设置事件目标的文本和颜色？

Question

我正在像这样在 Meteor 模板中加载项目数组：

{{#each person}}
  <tr>
    <td><input type="checkbox" class="sendtextckbx" checked></td>
    <td>{{per_firstname}}</td>
    <td>{{per_lastname}}</td>
    <td>{{per_streetaddr1}}</td>
    <td>{{per_streetaddr2}}</td>
    <td>{{per_placename}}</td>
    <td>{{per_stateorprov}}</td>
    <td>{{per_zipcode}}</td>
    <td>{{per_emailaddr}}</td>
    <td class="textnum">{{per_phone}}</td>
    <td class="textmorph">Not sent</td>
    <td>{{per_notes}}</td>
  </tr>
{{/each}}

我想在点击时用 ID "textmorph" 更新 td。它开始包含文本 "Not sent" 但是当点击 td 时，我希望它循环显示其他文本字符串，并相应地改变颜色。

因为这个 td 有 1..N 个实例，我不能只通过 class 值分配给它，因为会有很多共享相同的 class（一个用于每个人）。

我想我可以通过evt.target.value获取当前值，但我不知道如何设置该值。这是我的"pseudocode"（也称为胡乱猜测）：

Template.peopleGrid.events({
  'click #btnTextChecked': function() {
    alert('you clicked the btnTextChecked button');
  },
  'click #textmorph': function(evt) {
    var currentText = evt.target.value;
    alert(currentText);
    if (currentText === 'Not sent') {
      evt.target.value = 'Sent';
      evt.target.color = amber;
    }
    else if (currentText === 'Sent') {
      evt.target.value = 'Need Help';
      evt.target.color = red;
    }
    else if (currentText === 'Not sent') {
      evt.target.value = 'Are OK';
      evt.target.color = green;
    }
  }
});

...但我不确定它是否接近应有的状态。事实上，当我测试它时，~

那么如何对选定的 tds 进行操作，更改文本和颜色？该应用程序使用上面的代码运行，但是当我单击 "Not sent" tds 时给我一个 "undefined" 警报。

Answer 1

你并不太远。在纯 javascript 中，您实际上是通过其 innerHTML property. As for the color, you set it through style.color 获取和设置元素的内容。并在颜色名称周围使用引号！

因此：

Template.peopleGrid.events({
  'click #btnTextChecked': function() {
    alert('you clicked the btnTextChecked button');
  },
  'click #textmorph': function(evt) {
    var clicked = evt.target;
    var currentText = clicked.innerHTML;
    alert(currentText);
    if (currentText === 'Not sent') {
      clicked.innerHTML = 'Sent';
      clicked.style.color = 'amber';
    }
    else if (currentText === 'Sent') {
      clicked.innerHTML = 'Need Help';
      clicked.style.color = 'red';
    }
    else if (currentText === 'Need Help') {
      clicked.innerHTML = 'Are OK';
      clicked.style.color = 'green';
    }
  }
});

如何在 Meteor 中设置事件目标的文本和颜色？

How can I set the text and color of the event target in Meteor?

javascript

jquery

html-table

meteor

meteor-blaze