在jQuery模板中選擇多個元素

我試圖在點擊按鈕時更改模板中一個或多個元素的類。我所有的樣品通常都會找到一個帶有.tmplItem的項目，我無法弄清楚如何實現我想要做的。這或多或少是一個概念證明。在jQuery模板中選擇多個元素

我有一個像下面的結構。

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" />

外的按鈕，我添加了一個click事件爲：

$("#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')); 
     }  
});

最後一段腳本是不完整的，因爲我無法弄清楚如何讓它工作。任何幫助，將不勝感激。

來源

2011-10-05 BenSwitzer

你每一個複選框，設置爲'ID =「cbHasReadMessage」'，這是不允許的。將ID更改爲一個類。 – Blazemonger

感謝您指出。我非常習慣讓.net命名我的行級複選框，我忘了。 – BenSwitzer

從模板中刪除class="showMessage"乾脆然後代碼底部更改爲類似這樣：

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

來源

2011-10-05 19:01:51 ShaneBlake

似乎不起作用。我收到一個對象不支持該方法的錯誤。由於tr在模板中，你能夠像這樣引用tr嗎？我也注意到我設置了一個td來隱藏。我要檢查，看看這可能是問題。 – BenSwitzer

這確實奏效。語法是$（「tr.hdnMessage」）。toggleClass（'hdnMessage'）; – BenSwitzer

對不起typeo ...修復它... – ShaneBlake

在jQuery模板中選擇多個元素

回答

相關問題