$('.category').on('click',',function(){})怎么构成的
时间: 2023-10-02 19:08:06 浏览: 26
这是一个 jQuery 事件绑定的语法,表示在点击 `.category` 元素内部的任何子元素时,执行后面的函数。具体来说:
- `$()`:表示 jQuery 选择器,用于选中一个或多个元素。
- `.category`:表示要选中的元素,这里选择的是类名为 `category` 的元素。
- `.on()`:表示绑定事件的方法,可以绑定多个事件。
- `'click'`:表示要绑定的事件类型,这里是点击事件。
- `,`:表示链式调用多个事件,类似于 `addEventListener()` 方法的第三个参数。
- `function(){}`:表示要执行的函数,即事件处理函数。这里是一个匿名函数,可以根据需要传入参数。
相关问题
$('.category').on('click','li',function(){})
This code is using jQuery to attach a click event handler to all li elements within an element with the class "category". When any of these li elements are clicked, the function specified within the parentheses will be executed.
myChart.setOption(option); myChart.on('click', (params) => { var connect = {'data': [], 'bro': params.data, links: []}; var relate = []; var id = params.data.id graph.links.forEach(function (node) { if (node.source == id) { sid = node.target; graph.nodes.forEach(function (item) { if (item['id'] == sid && item.symbolSize < 21) { delete item.content delete item.category relate.push(item) } })
这段代码是一个事件处理函数,当用户点击 myChart 实例中的某个节点时,会执行这个函数。函数代码的主要作用是找到与点击节点相关联的其他节点,并将它们添加到一个名为 connect 的对象中。具体来说,代码会遍历 graph.links 数组,找到所有 source 属性等于点击节点 id 的元素,并将这些元素的 target 属性所对应的节点添加到 relate 数组中。然后,代码再遍历 graph.nodes 数组,在 relate 数组中找到的节点中,找到 symbolSize 小于 21 的节点,并删除这些节点的 content 和 category 属性,最终将它们添加到 connect.data 数组中。最后,代码还将 connect 对象中的 links 属性设为空数组。最终,connect 对象中的 data 属性就包含了与点击节点相关联的所有节点,可以在之后的代码中使用。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](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)