使用JavaScript实现事件的绑定并实现开合功能

2023-07-08 19:15| 来源: 网络整理| 查看: 265

JavaScript绑定点击事件一般使用onclick方法

方式一

首先随便写一个标签在标签中添加一个onclick属性让其等于JavaScript中的函数并给一个实参

JavaScript实现步骤：

定义一个全局变量i并让其等于零定义一个函数体并给一个形参在函数体中使用if(i%2==0){偶数时执行内容}else{奇数时执行内容}进行开合操作当偶数时通过形参.style.css属性="属性值"进行更改其CSS样式当奇数时通过形参.style.css属性="属性值"进行更改其CSS样式在if判断语句外写一个变量名+=1使其一直循环，否则只能开启不能关闭

代码演示：

点我 var i = 0; function changeColor(ths) { //判断奇偶数 if (i%2==0){ //偶数时将背景颜色改为绿色 ths.style.backgroundColor="green"; }else{ //奇数时将背景颜色改为红色 ths.style.backgroundColor="red"; } //写一个变量名+=1使其一直循环，否则只能开启不能关闭 i+=1; } 方式二

直接在html中随意写一个标签，并给一个id属性

JavaScript实现步骤：

写一个script在script标签中使用dom获取id的方式查找到html页面中的指定id的标签，并将这个dom查找存放在一个变量中随意声明一个全局变量并让其等于零直接为dom查找到的标签的变量绑定点击事件--变量名.οnclick= function(){执行内容}在function函数体内使用if(全局变量%2==0){偶数时执行的内容}else{奇数时执行的内容}来进行判断奇偶数在if判断外写一个变量名+=1使其一直循环，否则只能开启不能关闭

代码演示：

点我 //dom通过获取id的方式查找上面的标签，并将这个dom查找操作存放在一个变量中 var dele = document.getElementById("div2") var a = 0; //为查找到的标签进行绑定点击事件 dele.onclick = function (){ //通过if判断奇偶数 if (a%2==0){ //偶数时执行的内容 this.textContent="Hello"; }else{ //奇数时执行的内容 this.textContent="点我"; } //写一个变量名+=1使其一直循环，否则只能开启不能关闭 a+=1; } 方式三

这个依赖于jquery，所以需要进行下载jquery-3.4.1版本的jquery文件

百度网盘分享链接---提取码：1t3e

百度网盘jquery文件分享链接https://pan.baidu.com/s/1-K2l-jBgk0Sa7ZtPuxhnLA?pwd=1t3e 提取码：1t3e下载完成后将其放入HTML工程文件夹中并在HTML文件中导入jquery文件

导入完成后随意写一个标签并给一个id属性，然后开始写JavaScript

JavaScript实现步骤：

使用dom获取id的方式获取到你所创建的指定id的标签，并将dom操作存放在一个变量中，为后续更改内容时使用声明一个全局变量并让其等于零然后通过$('id值').click()的方式来进行绑定点击事件，然后直接在click()里面声明一个匿名函数，在这个函数体中写需要执行的内容在函数体中使用if来进行判断奇偶数if(变量名%2==0){偶数时执行内容}else{奇数时执行内容}然后在if判断外写一个变量名+=1使其一直循环，否则只能开启不能关闭

代码演示：

点我 //使用dom获取id的方式获取到你所创建的指定id的标签，并将dom操作存放在一个变量中，为后续更改内容时使用 var three = document.getElementById("div3") //声明一个全局变量 var d = 0; //通过$('id值').click()的方式来进行绑定点击事件，然后直接在click()里面声明一个匿名函数，在这个函数体中写需要执行的内容 $('#div3').click(function () { //使用if判断奇偶数 if (d%2==0){ //偶数时执行内容 three.textContent="开启"; }else{ //奇数时执行内容 three.textContent="关闭"; } //写一个变量名+=1使其一直循环，否则只能开启不能关闭 d+=1; })

效果对比：

【本文地址】

公司简介

联系我们