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＆＃34; textmorph＆＃34;来更新td。当它被点击时。它开始包含文本＆＃34;未发送＆＃34;但是当点击td时，我希望它循环浏览其他文本字符串，并相应地改变颜色。

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

我想我可以通过evt.target.value获取当前值，但我不知道如何设置值。这是我的＃34;伪代码＆＃34; （也称为疯狂猜测）：

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采取行动，改变文字和颜色呢？该应用程序运行上面的代码，但给了我一个＆＃34; undefined＆＃34;点击＆＃34;未发送＆＃34; TDS。

Answer 1

你不是太远了。在纯JavaScript中，您实际上通过其innerHTML属性获取并设置元素的内容。至于颜色，您可以通过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中设置事件目标的文本和颜色？

1 个答案: