首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在jquery中使用切换执行两个函数?

如何在jquery中使用切换执行两个函数?
EN

Stack Overflow用户
提问于 2014-04-08 23:59:24
回答 1查看 671关注 0票数 0

我使用toggle()函数来执行两个函数。当我单击带有class=“宠儿”的图像时,在第一次单击时,必须执行第一个函数,并且我应该得到警报(‘test1’);对于第二个单击,必须执行第二个函数,我应该得到警报(‘test2’),并且执行必须停止。

我的问题是,当第二次单击图像时,我得到警告(‘test2’),然后是警报(‘test1’),第二次单击时只执行第二个函数,即在第二次单击时只得到警告(‘test2’)。如何在第二次单击时停止第一个函数的执行?

这是我在index.phtml文件中的jquery代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
jqry("#wrap").delegate('img.favourite','click',function(){ 
    var id = jqry(this).attr('pid');
    jqry('#'+id).toggle(function(){
            alert('test1');     
        },
        function(){
            alert('test2');
        }
    );
});

这是我在JS文件中的代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    <img class="favourite"  src="images/fav.png" alt="favourite" pid ='project_id'>

我第一次点击得到的输出是test1

第二次单击得到的输出是test2 test1

在第二次单击时,我应该获得输出警报test2并停止执行,但它将进一步执行前面的函数,并给出两个警报,即test2test1。我怎么才能解决这个问题?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-04-09 00:10:33

您使用的.toggle()格式在jQuery 1.8中被废弃,在1.9中被删除。此外,每次调用它时,它都会绑定一个单击处理程序,因此您真的不想多次调用它--这可能是您看到两个警报的原因,因为每次绑定它时,都会在单击时再得到一个回调。第一次,第二次,第三次,等等。

我建议你在每次点击时找到一种不同的交替函数的方法。也许只需使用.data()在项目上设置一个标志,然后根据标志设置一个备用标志。

对于id元素上的.toggle()函数,还不太清楚,但这将使您可以交替调用函数,然后可以在每个函数中实现您想要的任何操作:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
jqry("#wrap").delegate('img.favourite', 'click', function() { 
    var toggle = $(this).data("toggleFlag") || false;
    var id = jqry(this).attr('pid');
    if (toggle) {
         // do whatever you want with id here
         alert("test1");
    } else {
         // do whatever you want with id here
         alert("test2");
    }
    // reverse the toggle flag
    $(this).data("toggleFlag", !toggle);
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22956278

复制
相关文章
绑定事件中 如可控制函数的执行次数
var flag = true; function onlyOne() { if(flag) { "这里是要执行的代码"; } flag = false//该方法是控制函数仅执行一次 因为flag是全局变量 onlyOne()函数执行一次后flag就变成false了 函数就执行不了了
大当家
2018/06/28
2.3K0
jquery定时执行函数_jquery自动提交
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/10/01
2.3K0
jQuery函数的使用
上述代码将从Google的CDN中加载jQuery库。确保将其放在<head>标签或页面内容的顶部。
堕落飞鸟
2023/05/18
1.5K0
JQuery实现图片切换(自动切换+手动切换)
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/details/43342089
DannyHoo
2018/09/13
6.5K0
jquery 等待3秒钟执行函数
setTimeout(function(){$("#div2").hide()}, 3000);
py3study
2020/01/09
2.6K0
jQuery中$()可以有两个参数
概述 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果没有指定context参数,$()将在当前的 HTML document中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。在jQuery 1.3.2以后,其返回的元素顺序等同于在context中出现的先后顺序。 参考文档中 选择器 部分获取更多用于 expression 参数的 CSS 语法的信息。
用户1289394
2021/10/26
1K0
jquery实现图片切换
<div> <img class="imgclick" src="img/pic1.png" /> </div> <script> $(".imgclick").toggle(function(){ $(this).attr("src", "img/pic1.png"); }, function() { $(this).attr("src", "img/pic2.png"); }).attr("src", "img/pic1.png"); </script> 也
达达前端
2022/04/29
12.9K0
使用jQuery封装实用函数
一、引言 项目开发中,前端会有一个辅助工具类的js文件,比如cookie的操作,团队成员自己封装的方法。大多数时候,我们开发人员自己都是写一个全局函数,不考虑后期维护人员也会写相同的代码,然后造成代码之间的冲突。之前维护的一段代码如下: var g=function(id){ return document.getElementById(id); }; var $$=function(id){ return document.getElementById(id); }; g("testdi
八哥
2018/01/18
1.3K0
如何在 docker 中执行 crontab
新建名为hello-cron的文件 内容为: # PATH非常重要,因为cron bash和系统环境变量不一致 PATH="/usr/local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin" * * * * * echo hello > /proc/1/fd/1 2>/proc/1/fd/2 # An empty line is required at the end of this file for a valid c
马哥Python
2019/06/27
7.1K0
如何使用几何画板画函数图像,如极坐标函数图像?
1、点击[绘图] 2、点击[网格样式] 3、点击[极坐标网格] 4、点击[绘图] 5、点击[绘制新函数] 6、点击[3] 7、点击[函数] 8、点击[cos] 9、点击[θ] 10、点击[确定] 11、点击[是]
裴来凡
2022/05/28
1.3K0
如何使用几何画板画函数图像,如极坐标函数图像?
JQuery中bind和unbind函数
测试: 页面代码: <body> <input type="button" name="aaa" value="点击我"> <input type="checkbox" name="checkbox1"> </body> JQuery代码: $().ready(function(){ for (var i = 0; i < 3; i++) { $("input[type='button']").click(function(){ alert("aaaa"); }); } } alert("aaaa")会执行三次,在事件嵌套事件中,不希望看到这样的情况,需要把上层事件禁用,此时可引入bind和unbind函数解决。 引入函数: for (var i = 0; i < 3; i++) { $("input[type='button']").unbind("click"); $("input[type='button']").bind("click", function(){ alert("aaa"); }); } alert("aaa");仅执行一次。 bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数 unbind() 方法移除被选元素的事件处理程序。能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。 event 是事件类型,类型包括:blur、flcus、load、resize、scroll、unload、click、dblclikc、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等,当然也可以是自定义名称。 data 为可选参数,作文event.data属性值传递给事件对象的额外数据对象。 function 是用来绑定的处理函数。 语法: $(selector).bind(event,data,function) // event 和 function 必须指出下面些段代码做说明: 例1:删除p的所有事件 $("p").unbind(); 例2:删除p的click事件 $("p").unbind("click"); 例2:删除p元素click事件后出发的test函数 和 添加p元素click事件后触发的test函数 $("p").unbind("click",test);$("p").bind("click",test); 注意:要定义 .bind() 必须指明什么事件和函数现在来看个简单的demo ,整个div有一个点击收起展开的事件,如果想要点击链接但是不触发div的点击事件,需要在触发链接的时候把div的点击事件禁用,这里我用到链接mouseenter事件是unbind删除div的事件。这里还不算完,这时候只要鼠标进入链接区域,div的点击事件就删除了,我们还需要加入鼠标移出链接区域的时候恢复div点击事件。代码如下: 12345678910$(function(){ var Func = function(){ $(".com2").toggle(200); } $(".test").click(Func) $(".test a").mouseenter(function(){ $(".test").unbind(); //删除.test的所有事件 }); $(".test a").mouseleave(function(){ $(".test").bind("click",Func); //添加click事件 }); });event 是事件类型 … function 是用来绑定的处理函数。 部分内容来自http://www.dearoom.com/blog/详解unbind和bind/http://www.dearoom.com/blog/事件捕获事件冒泡和阻止事件冒泡/
一个会写诗的程序员
2018/08/17
1.1K0
如何在 Chrome 中执行 JavaScript 代码
要在浏览器中执行 JavaScript 脚本,首先你的浏览器得支持。现在主流推荐 Chrome 浏览器,也可以使用基于 Chromium 的 Edge 浏览器。下面来介绍如何在 Chrome 中打开开发者工具,以及如何在开发者工具中运行调试 JavaScript 代码。
村雨遥
2022/03/14
6K0
如何在 Chrome 中执行 JavaScript 代码
jquery等待特定元素加载再执行相关函数
默认是执行100次,每次间隔20毫秒,最长等待时间是2000毫秒(2秒),如果要一直等待到元素出现,可以将100改成任意负数。
怪兽
2022/10/04
1.4K0
【Jquery练习】tab栏切换
在实现今天的练习之前,我们先来了解一下排他思想,排他思想也就是为当前元素设置一个特定的样式,并为其他兄弟元素清除样式。多用于多选一的效果。
颜颜yan_
2022/12/01
5.9K0
【Jquery练习】tab栏切换
如何在ClickHouse中快速实现AB表切换
AB 表切换的使用场景应该说还是很广泛的,比如历史表归档、批量抽数的时候都可以采用 AB 表切换的思路来实现。
Nauu
2021/05/27
2.6K0
如何在 Bash 中编写函数
在编程时,实际上是在定义要由计算机执行的 过程(procedure)或 例程(routine)。一个简单的类比是将计算机编程与烤面包进行比较:你一次列出了要组建工作环境的配料,然后列出了烤面包所必须采取的步骤。在编程和烘烤中,必须以不同的间隔重复执行某些步骤。例如,在烤面包中,这可能是酵母培养的过程:
用户1880875
2021/09/16
1.8K0
解决JQuery中的ready函数冲突
jQuery确实是一个提高前端开发效率的好框架(虽然很多大牛们都说它效率不咋地),但是用好它有时候并不容易,也许你也遇到过以下情况: 一个aspx页面通常可以包含其它ascx控件,如果在多人协同开发的情况下:程序员小张在控件A.ascx中使用了 $().ready(function{}),而程序员小王又在控件B.ascx中也使用了ready函数,程序员小李在做页面时,把A.ascx,B.ascx都拖到自己的页面中,然后在页面中也需要用到$().ready函数,这下好了: 虽然jQuery本身的设计还算不错,
菩提树下的杨过
2018/01/22
1.6K0
如何在 Bash 中编写函数
在编程时,实际上是在定义要由计算机执行的 过程(procedure)或 例程(routine)。一个简单的类比是将计算机编程与烤面包进行比较:你一次列出了要组建工作环境的配料,然后列出了烤面包所必须采取的步骤。在编程和烘烤中,必须以不同的间隔重复执行某些步骤。例如,在烤面包中,这可能是酵母培养的过程:
用户1880875
2021/09/15
1.8K0
jquery实现tab切换完整代码
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/120769.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/15
5K0
点击加载更多

相似问题

jQuery切换函数不执行

30

如何在两个jquery函数之间切换

50

如何在jquery中的两个函数之间切换?

30

Jquery切换两个函数

24

如何在两个函数jquery之间缓慢切换

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文