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

Question

我加载项的阵列中的流星模板，像这样：

{{#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。它首先包含文本“未发送”，但是当单击td时，我希望它循环其他文本字符串，并相应地更改颜色。

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

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

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进行操作，更改文本和颜色？该应用程序使用上面的代码运行，但是当我单击“未发送”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'; 
    } 
    } 
});