layui script text/html {{# if判断中获取页面元素进行判断
时间: 2024-03-22 14:42:21 浏览: 21
在Layui的模板引擎中,可以使用`{{# if}}`语句来进行判断,同时也可以使用Layui的选择器来获取页面元素。
示例代码:
```html
<!-- 判断页面中是否存在id为test的元素 -->
{{# if($("#test").length > 0){ }}
<div>存在</div>
{{# } else { }}
<div>不存在</div>
{{# } }}
```
其中,`{{# if}}`语句中的条件判断使用了jQuery的选择器`$("#test")`来获取id为test的元素,并通过`.length`来判断该元素是否存在。如果该元素存在,输出`<div>存在</div>`,否则输出`<div>不存在</div>`。
相关问题
layui script text/html if判断中获取页面元素进行判断
可以使用jQuery来获取页面元素并进行判断。
示例代码:
```javascript
// 判断页面中是否存在id为test的元素
if ($("#test").length > 0) {
// 存在
} else {
// 不存在
}
```
其中,`$("#test")`表示选中id为test的元素,`.length`表示该元素的数量。如果该元素的数量大于0,则表示存在该元素,否则表示不存在该元素。
layui script text/html {{# if判断中获取页面元素进行判断时报错 $ is not defined
在Layui的模板引擎中,不能直接使用`$`符号,因为Layui使用的是`layui.$`来代替jQuery的`$`符号。
示例代码:
```html
<!-- 判断页面中是否存在id为test的元素 -->
{{# if(layui.$("#test").length > 0){ }}
<div>存在</div>
{{# } else { }}
<div>不存在</div>
{{# } }}
```
其中,`layui.$("#test")`表示选中id为test的元素,`.length`表示该元素的数量。如果该元素的数量大于0,则表示存在该元素,否则表示不存在该元素。
相关推荐
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书商城-图书列表</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> 0">
{{bk.bookName}} ¥{{bk.bookPrice}} <iframe src="footer.html" frameborder="0" scrolling="no" width="100%" height="245px"></iframe> <script src="/BookShopSystem_war/layui/layui.js"></script>这是完整的html代码,请结合你给出的分页功能整合出完整的代码
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <style> .content { padding: 15px; } i { margin-right: 10px; } .site-doc-icon li { width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #0099FF; cursor: pointer; color: #fff; border-radius: 50%; } .site-doc-icon li { display: inline-block; margin: 10px; } .site-doc-icon li { display: inline-block; } </style> </head> <body class="layui-layout-body"> <#include "head.ftl"> 首页 用户管理 分类管理 书评管理 统计占比 欢迎来到共享图书系统
<#include "bottom.ftl"> </body> <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="/js/axquery.js"></script> <script type="text/javascript" src="/js/template-web.js"></script> <script type="text/javascript" src="/layui/layui.all.js"></script> <script> layui.use([], function () { var $ = layui.jquery; //演示动画开始 $('.site-doc-icon .layui-anim').on('click', function () { var othis = $(this), anim = othis.data('anim'); //停止循环 if (othis.hasClass('layui-anim-loop')) { return othis.removeClass(anim); } othis.removeClass(anim); setTimeout(function () { othis.addClass(anim); }); //恢复渐隐 if (anim === 'layui-anim-fadeout') { setTimeout(function () { othis.removeClass(anim); }, 1300); } }); //演示动画结束 }) </script> </html>如何和后端交互的
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)