我试图在单击按钮时更改模板中一个或多个元素的类。我拥有的样本通常都会找到带有 .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'));
}
});
最后一个脚本片段不完整,因为我不知道如何让它工作。任何帮助将不胜感激。
最佳答案
从模板中完全删除 class="showMessage"
然后将代码的底部部分更改为如下所示:
$("#btnShowHideReadMessages").click(function() {
$("tr.hdnMessage").toggleClass('hdnMessage');
});
关于jquery - 选择 jquery 模板中的多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7665858/