jQuery点击变色再点击还原,这是这部分代码,怎么实现点击之后变色,再点一次还原

jQuery点击变色再点击还原,这是这部分代码,怎么实现点击之后变色,再点一次还原,第1张

添加一个类,然后判断是否有该类,有则删除,没有则添加。如添加一个blue类。点击上午按钮时的代码如下:

$("#applyTimeMor")click(function(){
    if($(this)hasClass("blue")){
        $(this)removeClass("blue");
    }else{
        $(this)addClass("blue");
    }    
});

这是一个例子,你可以参考一下

当按钮被按下时,发生 keydown 事件

keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。

语法

$(selector)keydown(function)

例如:

$(document)keydown(function(event){
alert(eventkeyCode);//d出按键的对应值 
});

你用的是jquery可以手动调用jquery的触发事件的方法。例如以下例子。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="aaa">aaa</button>
<button id="bbb">bbb</button>
</body>
<script src="jqueryjs"></script>
<script>
  $(function () {
      //给aaa增加事件监听
 $('#aaa')on('click',function () {
          consolelog('aaa clicked');
 // 触发bbb点击事件
          // 第一种方案:调用bbb点击事件的执行方法,但此时获取不到bbb的点击event对象
 bbbClickHandler();
 //第二种方案:模拟触发点击bbb的过程
 $('#bbb')trigger('click');
 });
 // 给bbb增加点击事件
 function bbbClickHandler(){
          consolelog(arguments);
 consolelog('bbb clicked');
 }
      $('#bbb')on('click',bbbClickHandler);
 })
</script>
</html>

两种方法,

一种,点击后,把按钮或链接的disabled设为true,让它变成不可用状态;

二种,直接在程序里判断和设定。

比如 :

var doing=false;//定义一个全局变量
$("buttondo")on("click",function(){
    if(doing){
        alert("上一个 *** 作未完成");
    }else{
        doing=true;//变量设为true,表示开始 *** 作
        //do something 如ajax
        $ajax({url:"地址"})done(function(){
            doing=false; //变量改回false 表示结束 *** 作
        });;
    }
});

flag=true;
$("div") click(function(){if(flag){$("div") css("background-color","yellow")
flag=flase;}
else{/原来的颜色/
$("div") css("background-color","green");}})
这个虽然能实现,但是还是有点小问题的,可维护性比较差。

<script type="text/javascript" src="jqueryjs"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#selectAll")click(function () {//全选
if($("#playList :checkbox")attr("checked") == true){
$("#playList :checkbox")attr("checked", false);
}else{
$("#playList :checkbox")attr("checked", true);
}
});
$("#unSelect")click(function () {//全不选
$("#playList :checkbox")attr("checked", false);
});
$("#reverse")click(function () {//反选
$("#playList :checkbox")each(function () {
$(this)attr("checked", !$(this)attr("checked"));
});
});
});
</script>
<div id="playList">
        <input type="checkbox" value="歌曲1" />歌曲1<br />
        <input type="checkbox" value="歌曲2" />歌曲2<br />
        <input type="checkbox" value="歌曲3" />歌曲3<br />
        <input type="checkbox" value="歌曲4" />歌曲4<br />
        <input type="checkbox" value="歌曲5" />歌曲5<br />
        <input type="checkbox" value="歌曲6" />歌曲6
</div>
    <input type="button" value="全选" id="selectAll" />
    <input type="button" value="全不选" id="unSelect" />
    <input type="button" value="反选" id="reverse" />


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13344597.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-18
下一篇 2023-07-18

发表评论

登录后才能评论

评论列表(0条)

保存