首页 > 其他分享 >js给多个具有相同class的元素绑定同一个事件或者样式

js给多个具有相同class的元素绑定同一个事件或者样式

时间:2023-11-17 10:01:58浏览次数:38  
标签:function 绑定 class btn2 each js btn1 css

<button class="btn1">month1</button>
<button class="btn1">month2</button>
<button class="btn1">month3</button>

若要给上面3个都具有btn1的class的按钮,添加同样的点击事件,则如下操作:

$(".btn1").each(function () {
	$(this).click(function () {
		alert($(this).html());
	});
});

若接下来要给上面3个都具有btn1的class的按钮,添加相同的css样式,则如下操作:

$(".btn1").each(function () {
    $(this).css({
        "height": "20px",
        "width": "100px"
    });
});
<button class="btn1 btn2">month4</button> 
<button class="btn1 btn2">month5</button>
<button class="btn1 btn2">month6</button>

如果目标元素是像上面这样,具有多个class,则如下操作:

$(".btn1.btn2").each(function () {
    my_function();
});

或者:

$("[class='btn1 btn2']").each(function () {
    my_function();
});

标签:function,绑定,class,btn2,each,js,btn1,css
From: https://blog.51cto.com/u_16291619/8436741

相关文章

  • 用JS实现简单的新闻向上轮播效果
    最近在项目中遇到一个需求,就是实现一个功能,具体内容就是写一个类似轮播的功能,有限条标题,循环轮播。首先准备一个div,里边设置好要展示的内容divclass="panelline1"style="overflow:hidden"><h2>新闻动态</h2><divclass="app"><ahref="https://w......
  • 数据双向绑定的原理
    一、双向绑定的逻辑介绍:    双向绑定是一步步实现的,现在我们来考虑,在vue中,双向绑定的事情逻辑是什么。首先,要想实现数据双向绑定就要先实现单向绑定,也就是说,就要先实现vue里的data对象中的数据,能够替代写在template模板里的插值表达式中变量名,实现插值表达式获取数据对象......
  • java:Json
    /***encoding:utf-8*版权所有2023涂聚文有限公司*许可信息查看:*描述:*#Author:geovindu,GeovinDu涂聚文.*#IDE:IntelliJIDEA2023.1Java17*#Datetime:2023-2023/11/16-12:29*#User:geovindu*#Product:Int......
  • 【开源】基于Vue.js的计算机机房作业管理系统的设计和实现
    一、摘要1.1项目介绍基于Vue+SpringBoot+MySQL的计算机机房作业管理系统包含课程档案模块、课时档案模块、学生作业模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,计算机机房作业管理系统基于角色的访问控制......
  • 【开源】基于Vue.js的车险自助理赔系统的设计和实现
    一、摘要1.1项目介绍基于Vue+SpringBoot+MySQL的车险自助理赔系统包含车辆管理模块、车险理赔模块、理赔审核模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,车险自助理赔系统基于角色的访问控制,给车险管理......
  • python 处理html中 class中存在空格 获取问题
     html="""<h1class='tdp1'>0000000000000000000000000</h1><h1class='tdp2'>123333333333333333333</h1><h1class='p2'>111111111111111111111111111111111111<......
  • JS判断变量的具体数据类型封装函数
    封装函数为://返回传入值的数据类型functionGetValueType(val){vartype=typeofval//object需要使用Object.prototype.toString.call判断if(type==='object'){vartypeStr=Object.prototype.toString.call(val)//解析[objectStr......
  • 使用js添加按钮,vue页面 el-calendar 添加自定义按钮
    html代码:<divclass="schedule"><divclass="title">今日日程</div><divclass="allSchedule"><el-rowclass="addSchedule"type="flex"align="......
  • JS逆向实战26——某店ua模拟登陆
    声明本文章中所有内容仅供学习交流,抓包内容、敏感网址、数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除!目标目标网站aHR0cHM6Ly9kLndlaWRpYW4uY29tL3dlaWRpYW4tcGMvbG9naW4=目标获取登录接口UA参数加密,U......
  • nodejs敲门
    前言node.js是在电脑上,给js一个可以脱离浏览器运行的环境。功能上像jdk,操作为命令行。现在演化为可以做web服务器使用,拥有许多成熟的项目和插件。本文简单讲讲它,以及它的两个小用途(TS和WebApi服务器)。谈不上入门,只能算是“敲门”。  安装:nodejs官网和中文网都可以下载安......