如何在jQuery模板中根据隐藏域值显示/隐藏指定列?
解决jQuery模板中根据隐藏域值显示/隐藏列的问题
你的问题出在jQuery模板的{{if}}块里直接使用原生DOM方法获取隐藏域值的方式上——模板渲染时的作用域和执行时机导致这个表达式没法正确拿到你想要的值。下面给你两种可行的解决方案:
方案1:提前获取隐藏域值并传入模板数据(推荐)
这种方式更高效,因为只需要获取一次隐藏域的值,不用每次渲染模板都去操作DOM:
首先,在调用模板渲染前,先拿到隐藏域的值并整合到要传递给模板的数据中:
// 获取隐藏域的值,转换成布尔值方便判断 var shouldShowQty = $("#hdnShowQty").val() === "0"; // 假设你的订单详情数据是orderDetail var templateData = { order_id: orderDetail.order_id, qty: orderDetail.qty, showQty: shouldShowQty }; // 渲染模板到目标表格 $("#TestTemplate").tmpl(templateData).appendTo("#yourTargetTable");
然后修改模板,直接使用传入的showQty变量进行判断:
<script id="TestTemplate" type="text/x-jquery-tmpl"> <tr id="trOrderDetail"> <td align="right">${order_id}</td> {{ if showQty }} <td align="right">${qty}</td> {{/if}} </tr> </script>
方案2:在模板中使用jQuery选择器直接获取值
如果你不想修改传入的数据结构,也可以在模板的{{if}}条件里用jQuery选择器来获取隐藏域的值(前提是隐藏域已经存在于DOM中):
<script id="TestTemplate" type="text/x-jquery-tmpl"> <tr id="trOrderDetail"> <td align="right">${order_id}</td> {{ if $("#hdnShowQty").val() === "0" }} <td align="right">${qty}</td> {{/if}} </tr> </script>
为什么原来的代码不生效?
jQuery模板在编译和渲染时,内部作用域会对表达式进行特殊处理,直接使用document.getElementById('hdnShowQty').value这种原生DOM操作,可能会因为作用域绑定问题,导致在模板执行时无法正确访问到全局的document对象,或者表达式在编译阶段就被静态解析,而不是在渲染时动态获取值,所以没法达到你想要的效果。
内容的提问来源于stack exchange,提问作者user1926138
相关产品推荐
相关产品推荐

