• 关于

    jquery点击切换

    的搜索结果

问题

Jquery怎样让同一个按钮触发不同的事件,详见下文叙述

a123456678 2019-12-01 20:20:00 974 浏览量 回答数 1

问题

jquery tn3如何动态修改delay?

a123456678 2019-12-01 20:23:16 850 浏览量 回答数 1

问题

【求助】求一个轮播焦点图的jQuery代码

杨冬芳 2019-12-01 19:45:24 1410 浏览量 回答数 1

阿里云高校特惠,助力学生创业梦!0元体验,快速入门云计算!

学生动手场景应用,快速了解并掌握云服务器的各种新奇玩法!

回答

我们从实际的应用来表达一下你的意思吧举个例子,有这样一堆li <ul class="list"> <li>Bootstrap</li> <li>jQuery</li> <li>gulp</li> <li>angular</li> </ul> 我希望点击每个li,都能够在控制台中输出li的内容,于是可以这样写 $(function() { $('.list').on('click', function(e) { console.log($(e.target).html()); }) }); 你运行试试看,效果已经达到了。这里运用了事件委托的思想,在点击时,使用 $(e.target)来判断被点击的对象其中 e.target是DOM对象,表示的是被点击的li,$(e.target)当然就是被点击那个li的jQuery对象了 也许在其他的一些应用场景中,你需要得到被点击li的序列,比如幻灯片切换效果的那一堆小按钮,除了在li中直接设置1,2,3,4之外,现在还流行一种做法,就是设置诸如data-item之类的属性值 整个例子的完整代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-2.0.3.js"></script> </head> <body> <ul class="list"> <li>Bootstrap</li> <li>jQuery</li> <li>gulp</li> <li>angular</li> </ul> </body> <script> $(function() { $('.list li').each(function(i) { $(this).attr('data-item', i); }) $('.list').on('click', function(e) { var $curLi = $(e.target); console.log($curLi.html()); //输出当前li的值 console.log($curLi.attr('data-item')); //输出当前li的序列 }) }); </script> </html>

小旋风柴进 2019-12-02 02:24:32 0 浏览量 回答数 0

回答

用这个吧。。点击可以上下切换 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script> <style> #rocket{position:fixed;background:#ccc;left:0;bottom:0;width:100px;height:100px} </style> <div style="height:2000px"></div> <div id="rocket" onclick="fireRocket()"></div> <script> function fireRocket() { var rocket = $('#rocket') , rw = rocket.width() , rh = rocket.height() , css1compat = document.compatMode == 'CSS1Compat' , ch = document[css1compat ? 'documentElement' : 'body'].clientHeight , cw = document[css1compat ? 'documentElement' : 'body'].clientWidth , up = rocket.css('left') == '0px'; rocket.animate({ left: up ? cw - rw : 0, bottom: up ? ch - rh : 0 }, 2000, function () {/* 切换图片什么的。。*/ }); } </script>

小旋风柴进 2019-12-02 02:10:15 0 浏览量 回答数 0

问题

一个轮播图左右控制按钮点太快,点几次图片会自己切换几次,怎么才能让他显示完一张图片后控制按钮点击才能再生效呢?

杨冬芳 2019-12-01 19:51:41 1188 浏览量 回答数 1

问题

jquery ui datepicker如何实现点击切换某天的样式?

小旋风柴进 2019-12-01 19:31:28 968 浏览量 回答数 1

问题

用toggle()方法如何实现背景色来回切换?

小旋风柴进 2019-12-01 19:35:34 1033 浏览量 回答数 1

问题

jquery 如何排除最后一个li事件呢?

小旋风柴进 2019-12-01 19:33:37 955 浏览量 回答数 1

问题

如何用jquery实现连接切换?

a123456678 2019-12-01 20:17:38 797 浏览量 回答数 1

问题

一个简单的jQuery问题,click后没有反应??怎么办

小旋风柴进 2019-12-01 19:35:14 588 浏览量 回答数 1

问题

8 个很有用的 jQuery 技巧报错

kun坤 2020-06-03 13:09:52 4 浏览量 回答数 1

问题

点击超链切换iframe中的src所遇到的问题

小旋风柴进 2019-12-01 19:22:07 1221 浏览量 回答数 1

回答

这是个好问题。不知道题主是否熟悉自由测试和弱网测试这两个提法——这其实就是你提出的测试需求。简而言之:自由测试就是乱点;弱网测试就是人为制造掉包和延迟(可能制造成随机或确定性的)。这两个测试都是非常重要的。程序能否顶住这两项测试,保证一切情况下的响应都是合理的(而不是跑飞),这是开发者对健壮性把握如何的一个重要指标。问题一分为二地看。先忽略“点击速率的控制”,仅看“如何保证加载结果正确”这一点。从体验的角度来看,用户点击多个选项卡时,内容应该仅以用户点击的最后一个选项卡为准。毕竟用户点击了新的选项卡,就包含着“之前没加载出来的旧选项卡,全都丢弃不要了”的潜台词。考虑这个序列:选项卡1点击 - 选项卡2点击 - 选项卡1响应到达 - 选项卡2响应永远丢包。此时用户体验来看,弹出选项卡1必然是怪异的(我明明点击的是选项卡2!)。唯一的正确答案是:显示为选项卡2永远加载中(或者提示超时出错,允许用户重新加载),而永远丢弃选项卡1的响应。从这个意义上,AJAX请求的发出你是不应当阻止的。你的真正需求是:发出新的AJAX请求的时候,如何将旧的请求全部停下来。这里必须说明的是:AJAX对象,保证HTTP的响应与请求一一对应。具体而言:某个具体的XMLHttpRequest实例发出了HTTP请求。那么此HTTP请求的响应,就会回到发请求的那个XMLHttpRequest实例上。这一点自动、必然、绝对、100%准确无误,并且由浏览器(或JS引擎)直接保证,无需任何编程干预。以上是针对原生AJAX而言的。jQuery也一样,只是对象变成了jQuery封装过的jqXHR而已。1次AJAX请求必然有1个实例,多个请求那就有多个实例来管理,这与任何其他条件无关,根本不用考虑“多个AJAX请求相同页面,响应会不会对应乱了”这种杞人忧天的问题。你说回调?那只不过是挂载在各个AJAX对象实例上的一个普通成员变量(JavaScript里函数和变量同为一等公民)。请求对象对应正确了,回调自然也不会乱。这种1次请求对应1个对象的关系,就给了我们在AJAX请求发出后,仍然能对其进行控制的可能。我们确实通常把 $.ajax() 当语句使用($.ajax(settings);),但事实上 $.ajax() 是有返回值的。$.ajax() 返回此次请求对应的 jqXHR 对象,我们可以通过此对象,来影响和操作这次请求本身。那么每次点击选项卡都发出请求,但只响应用户发出的最后一个请求的代码就非常好写了:$(function() { $('#单选你的选项卡的容器').data('request_buffer', null); }); $('.多选你的每一个选项卡').click(function() { // 旧的HTTP请求直接放弃加载 var previous_jqxhr = $('#单选你的选项卡的容器').data('request_buffer'); if (previous_jqxhr) { previous_jqxhr.abort(); } var current_jqxhr = $.ajax({ type: your_type, url: your_url, data: your_data, timeout: your_timeout_seconds * 1000, context: this, }) .beforeSend(function() { // 显示点loading小动画什么的 }) .done(function() { // 点亮你点击的选项卡,灭掉其他的 $('.多选你的每一个选项卡').removeClass('.选项卡点亮的效果'); $(this).addClass('.选项卡点亮的效果'); // 填充正文区域 $('#单选你显示正文的区域').html(你得到的响应正文); }) .fail(function() { // 你认为合适的超时处理 }); // 新的请求顶掉旧的请求 $('#单选你的选项卡的容器').data('request_buffer', current_jqxhr); });回调函数是控制HTTP请求的jqXHR对象调用的,所以如果不加污染,那么回调函数内的this指的是jqXHR本身。那么回调函数在调用到的时候,根本没有办法反查到你点击了哪个选项卡。所以一定注意代码里那个context。jqXHR对象的context,确定了jqXHR在调用回调函数的时候,把回调函数内看到的this污染成谁。只有在产生jqXHR的时候(即调用$.ajax()时)明确告知“此请求和哪些对象有联系”,在回调的时候才不会迷失方向,导致一些设置视觉效果的需求做不出来。实现要基于事物的本源。如果一个AJAX请求要丢弃,那就应当把请求对象本身挖出来,通知他自己放弃。这样不但彻底把待丢弃的无效回调本身消灭,更可以命令浏览器直接断开HTTP连接,节省宝贵的流量和并发数。这一点也是很重要的。而明知道请求用不着了还要接收下来,再以“提前return”之类的修补手段“手工丢弃”,这个绕圈子的方案明显是不够优的。实际上以上的措施,已经能够达到“保证加载结果正确”的目的了。 用户点得快,发出的请求多又怎么样? 反正同一时刻同时只有1条请求在网上跑,只有1个回调有调到的可能,一切的干扰要素都排除光了。在此基础上,如果引入“限制用户点击的速率”,那么就是纯粹为了减轻服务器压力考虑了。这个的办法就更加简单:用户点击一个选项卡(启动HTTP请求发送,可以挂在beforeSend事件上)时把所有的选项卡置灰。(不能点是必须明确提示用户的)然后等待以下两个触发条件触发任意一个,就可以把所有的选项卡恢复点击:成功分支:用户点的这个选项卡加载成功了(立刻允许用户切换到其他选项卡)失败情况:用户点击之后过去了 X 秒(加载不出来了,允许用户发出新的请求)这个的代码就略了。

小旋风柴进 2019-12-02 02:24:30 0 浏览量 回答数 0

问题

bootstrap的Tab切换不了标签页

小旋风柴进 2019-12-01 20:19:32 1837 浏览量 回答数 1

问题

jquery的eq()遍历和选择器:eq()造成的结果不同

a123456678 2019-12-01 20:22:11 1109 浏览量 回答数 1

问题

封装了一个渐隐渐现的轮播图组件,请问如何解决 第一次切换效果不正确?

小旋风柴进 2019-12-01 19:34:01 1108 浏览量 回答数 1

问题

jQuery对同一元素应用两个效果

小旋风柴进 2019-12-01 19:31:21 858 浏览量 回答数 1

问题

如何实现点击退出a标签后浏览器不能返回到之前的页面

小旋风柴进 2019-12-01 19:38:01 1214 浏览量 回答数 1

问题

【精品问答】前端实战100例之JavaScript篇

珍宝珠 2020-02-14 15:10:56 1456 浏览量 回答数 1

问题

前端进阶Bootstrap详解 【新手百问合集】

马铭芳 2019-12-01 20:09:03 6816 浏览量 回答数 3

问题

18款在线代码片段测试工具

老毛哈哈 2019-12-01 21:05:05 9388 浏览量 回答数 0

问题

一个滚动轮播的问题,存在bug

杨冬芳 2019-12-01 19:54:49 1107 浏览量 回答数 0

问题

想实现图片切换功能,但是最终效果是点击右边小图,左边显示的一直是最后一张图

小旋风柴进 2019-12-01 19:29:25 1454 浏览量 回答数 0

问题

【分享】html5 开发工具——WeX5中的各种绑定方式

小太阳1号 2019-12-01 21:25:48 4942 浏览量 回答数 3

回答

1.1 认识视图界面 和大多编辑器一样,该有的基本都有。 1.2 文件夹和文件的打开 文件——>打开文件夹/打开文件 1.3 新建文件/文件夹 新建文件: a. 文件——>新建文件; b. 按Ctrl+n; c. 点文件夹名后面的+号图标。 新建文件夹: 点文件夹名后面的+号图标。 1.4 拆分编辑器(分列) 快加键:Ctrl+\ 点击拆分编辑器图标(右上角)进行拆分编辑器。拆分完毕之后,可以通过鼠标点击拖动文件到相应的列。多列同时浏览免去多文件来回切换。 1.5 集成终端 终端对开发者来说不可或缺,Visual Studio code 自然也自带终端视窗。 可按快捷键Ctrl+`快速调出终端,也可以 查看——>集成终端 调出。 需要注意的是:如果当前的文件夹的路径名称包含中文,会出现终端打开失败(待验证)。 1.6 安装/卸载扩展(插件) a. 进入扩展视图界面安装/卸载 a1.快捷键:Ctrl+shift+x; a2.查看——>扩展; a3.点左侧边框的扩展图标按钮进入。 在顶部搜索框输入你需要的扩展插件,找到之后在扩展插件后面的选项中点击【安装】即可,需要卸载扩展只需要点【卸载】即可。 扩展下载安装完毕之后需要点击【启用】才生效,有些扩展需要重启编辑器才生效。 b. 如何选择扩展(插件)呢? 其实也不难,扩展的名称一般都暴露了它的功能,基本如下: 1.带snippets 一般是代码提示类扩展; 2.带viewer 一般是代码运行预览类扩展; 3.带support 一般是代码语言支持; 4.带document 一般是参考文档类扩展; 5.带Formatt 一般是代码格式化整理扩展; 当然有的snippets 也自带support功能,并不是以上面的关键词作为唯一标准。 1.7 文件图标主题设置 之前写的有一篇经验,链接附上。 0Visual Studio Code 怎么设置文件图标主题? END 2.VS code用户设置 2.1 用户设置入口 VS code支持用户自定义设置编辑器,包括快加键修改、代码高亮、以及扩展插件配置等,点击文件——>首选项——>用户设置。 编辑器会拆分为两列,一个文件是【默认设置】,一个是【settings.json】,用户设置是空的【settings.json】这个文件(之前没有设置的话),需要自定义的设置项就在settings.json文件里写入json代码即可。 2.2 自定义的设置方法为: 1、在【默认设置】里找到相关的设置json代码段,复制该设置完整的json块,例如:【"editor.fontSize": 14,】。 2、到【settings.json】粘贴。不过记得加上外层(前后)“{}”符号,不然不是完整的json,会出错或者设置无效。 例如: { "editor.fontSize": 20} 完后按Ctrl+s保存关掉窗口,编辑器的文字的大小就变成20了。 需要注意的是,【settings.json】的代码必须符合json格式,且名称(如上面的editor.fontSize)和值对(如上面的20)是【默认设置】里有的或者是扩展中支持的,不然不会有任何作用。 END 3.插件推荐及使用配置 VS code的扩展还是比较丰富的,具体选择方法在前面的步骤1.6已经教大家了,下面介绍几个对基本web前端编辑比较实用的扩展插件(我个人认为)。 3.1 HTNL Snippets 为HTML文档提供代码提示功能,包含HTML5。 3.2 easyless为less文档提供提示,错误警告,以及把less文档编译为css文件。可自定义设置。开发者给出的配置例子: "less.compile": {"compress": true,"sourceMap": true,"out":false} 可以粘贴到用户设置的【默认设置】里,也可以粘贴到用户设置settings.json里。后面的懂json的同学自动忽略:如果settings.json是空的,应该写成: {"less.compile": {"compress": true,"sourceMap": true,"out":false}} 如果之前已有写入json代码,你应该在前面的名称/值对块后面加上“,”(新手容易多加或者少加","符号,个人觉得是这样的)。 ****提示:**** 在写的时候,代码内最好不要加注释。"sourceMap": true, 这个地方最好设置成false ,因为当你实际使用的时候浏览器找不到sourceMap 可能会报错或者浏览器一直去找,还没遇到过(我碰到jQuery.js因为这个报错的),入门的同学还是设置成false 比较好。 3.3 VS color Picker 为css文档和HTML文档提供颜色选择,当输入“#”后会出现颜色选择器浮窗,点击相应颜色之后会插入文档中,默认用16进制表示。若想用其他格式的颜色,如RGB等则推荐扩展:Color Picker (Color Picker缺点是需要配置,安装nodejs,并且添加node到全局环境变量中。而且在插入时需要使用命令调出提色板,有点麻烦) 3.4 live HTML Previewer 为html文档提供预览功能,需要用命令或者快捷键调出,会在编辑器中新增一列,用于运行html文件。 a. 按F1在命令框中输入:Show side preview 新增一列显示html,能边写边看到效果,实时预览。 b. 可以在html文档中右键选择:Open in browser 在系统默认浏览器中打开,该模式下不能提供实时预览,保存时不自动刷新浏览器。 3.5 SVG Viewer 为SVG 文档在编辑器中提供预览。 a. 按F1在命令框中输入:SVG b. 选择SVG Viewer,新增一列显示SVG运行结果。 END 4.VS code 用户代码片段 4.1 用户代码片段 设置入口及示例 用户代码片段 是用来提示代码提示及快捷插入的,那么怎么做呢? 1.文件——>首选项——>用户代码片段 2.选择代码语言 3.按固定格式写json代码 示例格式: "Print to console": {"prefix": "log", "body": ["console.log('$1');","$2"],"description": "Log output to console"} 4.2 片段json示例写法详解 可变区域(这里用XXXX表示)如下:A. "Print to XXXX": { //仅作为标识和目的用途,区别于其他代码块(有多个相同值时会报错),不会插入。 B."prefix": "XXXX", //触发提示的关键字符,也就是输入什么时弹出提示窗。例如:当希望输入a的时候就弹出,这里就写a。在提示窗显示。 C. "body": ["XXXX $1 XXXX"], //在编辑器中插入的代码块,例如当在提示窗中选择a的时候就插入【<a>a</a>】那么这里就写:<a>a</a> D. "description": "XXXX" // 这里是相关描述,比如说明插入的代码块内容、用途、代码结构、参数等,仅在提示窗显示不会插入} E. 上面示例中的$1和$2是初始定位光标位置,用于插入后需要修改的值、参数等。还是上面的例子: "body":["<a>$1</a>"] 那么在插入<a></a>之后,光标的位置将处于<a>和</a>的中间。再如: "body":["<a>$1</a>", "<span>$2GBK</span>"] 那么在插入 <a></a> <span>GBK</span> 之后,光标首先在a标签内,输入完内容之后,光标跳到<span>和GBK中间。输入或者移动光标之后光标恢复正常 4.3 怎么使插入的代码块符合格式化标准? 代码格式化主要就是缩进和换行了。 1.要缩进的地方按下TAB键即可,例如:[" <a>$1</a>"] 2.怎么在"body":[]中插入带双引号的内容?因为注释带有特殊符号尤其是带有双引号("")的内容会导致json报错,解决方法是用反斜杠“\”对特殊符号进行转义。 例如: 那么"body":[]那里应该这样写: 这里在"description": "XXXX"那里同样适用。 总的来说,碰到json报错的字符或者符号就用反斜杠“\”进行转义。当然你要考虑插入之后会不会影响程序文档报错或者出现异常,也就是要先确定插入的代码块是正确的完整的,这是自定义代码块存在的意义 4.4 下面是我写的一段完整的示例(XXXX都匿了):自定义的json{ "Print to authorInfo": { "prefix": "au", "body": [ "-----By Ray-----", "mail:XXXXXXX", "description:$1", " Step 1:", " Step 2:", "<a href=\"XXXX/\">凯玩网</a>"], "description": "author info" 来源于网络,供您参考

保持可爱mmm 2019-12-02 02:20:23 0 浏览量 回答数 0

回答

<scripttype="text/javascript"src="http://echarts.baidu.com/doc/asset/js/jquery.js"></script>  <scriptsrc="http://echarts.baidu.com/doc/asset/js/esl/esl.js"type="text/javascript"></script>    <h2>饼图-实现点击事件+提示框样式</h2><inputtype="button"value="请点击我"/>   <!--为ECharts准备一个具备大小(宽高)的Dom-->  <divid="main"style="height:600px;width:800px;border:1pxsolid#e1e1e1;"></div>  <divid="main1"style="height:600px;width:800px;border:1pxsolid#e1e1e1;display:none;"></div>     <scripttype="text/javascript">    $(document).ready(function(){      $("input").click(function(){        test1(1);      });    });    functiontest1(n){      alert(n);      test();    }    functiontest(){      require.config({        paths:{          echarts:'http://echarts.baidu.com/doc/example/www/js/echarts-map',          'echarts/chart/pie':'http://echarts.baidu.com/doc/example/www/js/echarts-map',          'echarts/chart/map':'http://echarts.baidu.com/doc/example/www/js/echarts-map'        }      });      require(          [            'echarts',            'echarts/chart/pie',            'echarts/chart/map'          ],        function(ec){          //基于准备好的dom,初始化echarts图表          varmyChart=ec.init(document.getElementById('main'));          varmyChart2=ec.init(document.getElementById('main1'));          option={            tooltip:{              trigger:'item',              formatter:"{a}<br/>{b}:{c}({d}%)",              borderWidth:1,              borderColor:'red',              borderRadius:4,              backgroundColor:'#f1f1f1',              textStyle:{                color:'green',                fontFamily:'Arial',                fontSize:14              }            },            legend:{              orient:'vertical',              x:'left',              data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']            },            toolbox:{              show:true,              feature:{                mark:{show:true},                dataView:{show:true,readOnly:false},                restore:{show:true},                saveAsImage:{show:true}              }            },            calculable:true,            series:[                  {                    name:'访问来源',                    type:'pie',                    radius:['50%','70%'],                    itemStyle:{                      normal:{                        label:{                          show:false                        },                        labelLine:{                          show:false                        }                      },                      emphasis:{                        label:{                          show:true,                          position:'center',                          textStyle:{                            fontSize:'30',                            fontWeight:'bold'                          }                        }                      }                    },                    data:[                      {value:335,name:'直接访问'},                      {value:310,name:'邮件营销'},                      {value:234,name:'联盟广告'},                      {value:135,name:'视频广告'},                      {value:1548,name:'搜索引擎'}                    ]                  }                ]          };          varecConfig=require('echarts/config');          functioneConsole(param){            varstr=param.name+":"+param.value;            alert(str);            $("#main1").css({"display":"block"});            <spanstyle="background-color:#FF9900;">setTimeout(function(){test1(3);},200);          }          myChart.on(ecConfig.EVENT.CLICK,eConsole);          //myChart.on(ecConfig.EVENT.PIE_SELECTED,eConsole2);          myChart.setOption(option,true);        });    }  </script>3q,你上面的回答;在同一个div标签上切换饼图和折线图,就会报错,错误是:行:30错误:无法获取属性“removeChild”的值;对象为null或未定义这个错误是什么原因呢??

爱吃鱼的程序员 2020-06-20 16:58:25 0 浏览量 回答数 0

问题

某政务网站性能优化

猫饭先生 2019-12-01 21:25:38 1412 浏览量 回答数 0

问题

安卓与iOS百问,开发者系统指南

yq传送门 2019-12-01 20:14:48 27317 浏览量 回答数 26

问题

【javascript学习全家桶】934道javascript热门问题,阿里百位技术专家答疑解惑

管理贝贝 2019-12-01 20:07:22 6202 浏览量 回答数 1
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站