如何在Meteor中设置事件目标的文本和颜色？ [英] How can I set the text and color of the event target in Meteor?

问题描述

我在Meteor模板中加载了一系列项目，如下所示：

I am loading an array of items in a Meteor template like so:

{{#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}}

我想用idtextmorph更新td 点击它的时候。它开始时包含文本未发送，但是当单击td时，我希望它循环浏览其他文本字符串，并相应地更改颜色。

I want to update the td with the id "textmorph" when it is clicked. It starts off containing the text "Not sent" but when the td is clicked, I want it to cycle through other text strings, and change color accordingly, too.

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

Since there are 1..N instances of this td, I can't just assign to it via the class value, as there will be many sharing the same class (one for each person).

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

I think I can get the current value via evt.target.value, but I don't know how to set the value. This is my "pseudocode" (also known as a wild guess):

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;
    }
  }
});

...但我不相信它甚至接近应有的样子。事实上，当我测试它时，〜

...but I'm not confident it's even close to being what it should be. In fact, when I test it out, ~

那么我如何对选定的tds采取行动，改变文字和颜色？该应用程序使用上面的代码运行，但当我点击未发送tds时，会给我一个未定义警告。

So how can I act on the selected tds, changing the text and the color? The app runs with the code above, but gives me an "undefined" alert when I click the "Not sent" tds.

推荐答案

你不是太远了。在纯JavaScript中，您实际上通过其 <获取并设置元素的内容code> innerHTML 财产。至于颜色，你可以通过 style.color 。并使用颜色名称周围的引号！

You are not too far. In pure javascript, you actually get and set an element's content through its innerHTML property. As for the color, you set it through style.color. And use quotes around color names!

因此：

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中设置事件目标的文本和颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！