如何在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中,您实际上通过其 innerHTML 财产。至于颜色,你可以通过 style.color $ c $进行设置。 C>
。并使用颜色名称周围的引号!
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';
}
}
});