Question

单击按钮时，我试图更改模板中一个或多个元素的类。我所拥有的样本通常都会找到一个带有.tmplItem的项目，而我无法弄清楚如何实现我想要做的事情。这或多或少是概念证明。

我的结构如下。

var messages = [
{ Body: "Testing 1", Read: "0" },
{ Body: "Testing 2", Read: "1" },
{ Body: "Testing 3", Read: "0" },
{ Body: "Testing 4", Read: "1" }
];

我的模板是：

    <script id="messageTemplate" type="text/html">
        {{if Read == "1"}}
        <tr class="hdnMessage">
            <td class="hdnMessage" >
<input type="checkbox" id="cbHasReadMessage" checked="checked">
</td>
        {{else}}
        <tr class="showMessage">
            <td><input type="checkbox" id="cbHasReadMessage"></td>
        {{/if}}        
        <td>${Body}</td>
        </tr>
</script>

css是：

<style type="text/css">
.hdnMessage 
{
    display:none;
}
.showMessage
{
    display:block;
}
</style>

我在模板外面有一个按钮

<input type="button" value="Show Read Messages" id="btnShowHideReadMessages" />

我为：

添加了点击事件

$("#btnShowHideReadMessages").click(function() {    
if (showingReadMessages) {
      showingReadMessages = false;
      $(this).val("Show Read Messages");
//try to find checked checkboxes and set the class of the tr which is its parent
}    
else {
      showingReadMessages = true;
      ///Try finding all the current hidden TRs
      var hdnMessages = $("tr.hdnMessage").tmplItem();
      var hdnMsg = hdnMessages.data;
      var hdnElement = hdnMessages.nodes;
      $(hdnElement).replaceWith($('.showMessage'));
      }    
});

最后一个脚本段不完整，因为我无法弄清楚如何让它工作。任何帮助将不胜感激。

Answer 1

完全从模板中删除class="showMessage"，然后将代码的底部部分更改为以下内容：

$("#btnShowHideReadMessages").click(function() {  
     $("tr.hdnMessage").toggleClass('hdnMessage');
});

在jquery模板中选择多个元素

1 个答案: