js获得class中带active 的value

最新推荐文章于 2021-09-15 17:27:37 发布
最新推荐文章于 2021-09-15 17:27:37 发布
阅读量1.3k 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zylaolaolao/article/details/101449372
版权

获得橘色的value

在这里插入图片描述

html中的格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.class-item:hover {
				cursor: pointer;
			}
			.class-item.active {
				border: 1px solid #ff8500;
				background-color: #ff8500;
				color: #fff;
			}
			.class-item {
				display: inline-block;
				position: relative;
				padding: 5px 0px;
				background: #fff;
				width: 65px;
				text-align: center;
				font-size: 14px;
				color: #666;
				margin-right: 10px;
				margin-bottom: 10px;
				border: 1px solid #f0f0f0;
				border-radius:3px; 
				transition: all 0.3s;
				-webkit-transition: all 0.3s;
			}
			/* 行业分类被选中 */
			.class-item.active .fa-industry-checked {
				display: block;
			}

		</style>
	</head>

	<body>

		<span class="class-item active" onclick="isIndustryCheck(this);" id="industry_20">
			<input name="industry" type="hidden" value="20">彩票 
		</span> 
		<span class="class-item" onclick="isIndustryCheck(this);" id="industry_22">
			<input name="industry" type="hidden" value="22">司法 
		</span> 
		<span class="class-item" onclick="isIndustryCheck(this);" id="industry_4">
			<input name="industry" type="hidden" value="4">汽车 
		</span> 
		<span class="class-item" onclick="isIndustryCheck(this);" id="industry_5">
			<input name="industry" type="hidden" value="5">旅游 
		</span> 
		<span class="class-item" onclick="isIndustryCheck(this);" id="industry_6">
			<input name="industry" type="hidden" value="6">政务 
		</span> 
		<span class="class-item active" onclick="isIndustryCheck(this);" id="industry_8">
			<input name="industry" type="hidden" value="8">体育 
		</span> 
	</body>
</html>

现在通过寻找span中的class带active，获得span内嵌的input的value值（span的id都是以“industry_”开头）

var ids = new Array(); //初始化一个数组，用来存取input的value值
$.each($("span[id^='industry_']"), function(i) { //循环遍历span中id值以“industry_”开头对象
	if ($(this).hasClass('active')) { //如何该对象的class包含active
		ids[i] = $(this).find("input").val(); //寻找该对象的子级input的值，并赋值给ids数组
	}
});
zylaolaolao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js通过class获取标签的value值_CSS选择器[attribute|= value] 和 [attribute^= value]的区别...
weixin_34547628的博客
12-03 3251
前言首先你需要知道[attribute | = value] 和 [attribute ^ = value] 分别是什么？①：[attribute | = value] ②：[attribute ^ = value]使用场景下面我用获取input为例，逐步描述何时使用[attribute | = value] 和 [attribute ^ = value]）①：type相同，name不同，没有cl...
AngularJS入门教程之ng-class 指令用法
10-21
在本文中，我们将深入探讨`ng-class`指令的用法、定义、语法以及实例，帮助初学者更好地理解和应用这个功能。 ### ng-class 指令的基本概念 `ng-class`指令允许我们在AngularJS应用中根据变量的值或表达式的计算...
点击切换对应ajax数据赋值取值传给全局变量 到生成新的模板数据 （获取有class active样式的选中值！！！）
Khun_HWJ的博客
03-17 280
知识点： 1、将内容赋值给全局变量作为新的data数据传到模板里 2、获取有active样式的选中值 需求：点击切换班级对应相关信息 1、获取班级列表信息 $.post('/shared/profile/getmyclasslist',function (res) {}); 之前用模板循环了数据结果是所有的班级都出来了，但是需求是只显示一个，所以将模板的循环个去掉，数据为默认值d，d.clas...
js前端获取选中的active的值
任意门的博客
09-25 3954
<div class="makePlan-choose-2"> <div data-id="1" class="Y active">是</div> <div data-id="0" class="N">否</div> </div> 1.获取选中的值 var choseValue = $('.makePl...
原生js标识当前导航位置（给当前导航一个className=active）
weixin_30660027的博客
03-07 438
导航html结构为： <div class="header2-nav"> <a href="index.html">首页</a> <a href="course.html">课程page</a> <a href="teach.html">教学page</a> <a href="booking.htm...
获取标签中的class属性的值
咸鱼的博客
08-13 7748
在根据当前标签class是否为active，来为其他标签设置active的时候。我遇到了一个小问题，就是怎样获取标签内的class的属性值，于是乎我就测试了几个我能想到的方法，写了下来供自己查看，在这里也和大家分享一下。 DOM对象和jQuery对象： <!DOCTYPE html> <html> <head> <meta charset="u...
js实现动态改变radio状态的方法
10-18
在本文中，我们将探讨如何使用JavaScript（JS）动态改变HTML中的单选按钮（radio）状态。单选按钮在网页交互中经常用于让用户在多个选项中选择一个。在某些情况下，可能需要自定义其行为，例如改变选中状态或者样式...
js选项卡的实现方法
01-19
本文实例讲述了js选项卡的实现方法。分享给大家供大家参考。具体分析如下： 一、思路 1. 获取元素； ... 3. 点击当前按钮时会以高亮状态显示，通过for...input type=button class=active value=1/> <input type=
简单实现js选项卡切换效果
10-22
<input type="button" class="active" value="1"/> <input type="button" value="2"/> <input type="button" value="3"/> <input type="button" value="4"/> <div class="div2" style="display:block;">11 ...
Javascript js页面跳转 tab设置选中active
愿你走过半生，归来任是少年。
09-19 6281
页面跳转 设置active 这里有一个古老的方法,通过cookie设置索引的方法思否----可供参考 注意一点，就是存cookie的方法和取cookie的方法一定要分开 $('#footer li').each(function () { $(this).removeClass('active') var Index = $(this).index(); var now...
vue动态绑定class的几种方式
前端那点事的博客
10-30 11万+
#####对象方法 -最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染） :class=&quot;{ 'active': isActive }&quot; 判断是否绑定一个active :class=&quot;{'active':isActive==-1}&quot; 或者 :class=&quot;{'active':isActive==index}&quot; 绑定并判断多个 第一种（用
22 H5原生JS获取元素class属性值及操作
丨Anna丨的博客
10-28 8908
22 H5原生JS获取元素class属性值及操作 前面说到每一个预定义属性都有一个property与之对应。因为class是关键字因此attribute对应的property名称为className,通过className我们可以获取到元素class的属性值。 1获取class的属性值 示例 <head> <meta charset="UTF-8"> <title>01_H5原生JS获取元素class属性值及操作</title> ...
javascript获取li列表中有active标签的序列号
清淡描写的博客
12-06 1万+
javascript获取li列表中有active标签的序列号 Author:[前进的大牛] 代码块代码块语法遵循标准markdown代码，例如： **需要引入jquery文件** ------------HTML代码: <ul> <li>1</li> <li c
Vue之(class与v-bind) : CSS点击Active类样式,以及页面加载第一个就有默认样式Active实战采坑篇...
weixin_33720956的博客
01-25 3312
现在有这么需求,看效果图,大家都秒懂! 我这边ui模板用的mui的,点击每个tabbar的儿子div,有蓝色 代码如下: &lt;template&gt; &lt;div&gt; &lt;div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-contr...
web UI自动化元素定位及常见操作
汪敏的博客
09-15 939
web UI自动化元素定位及常见操作web UI自动化元素定位及常见操作元素定位idnameXPathcss_selectorlinktag_nameclass_name好用优先级常见操作 web UI自动化元素定位及常见操作 元素定位 id selenium中自带id定位，可以通过元素的id属性进行定位操作 driver.find_element_by_id('iddemingzi') name selenium中自带name定位，可以通过元素的name属性进行定位 driver.find_elemen
Jquery选择器：通过class名获取ID
王春兰的博客
02-28 5万+
记录一下自己不太熟悉的Jquery选择器的用法。 通过class名获取 按 class 查找注意在 class 名称前加一个.： var a = $('.red'); // 所有节点包含 `class="red"` 都将返回 // 例如: // &lt;div class="red"&gt;...&lt;/div&gt; // &lt;p class="green red"&..
js通过class获取标签里面的内容、修改class属性
JEFF_xieyuzhi的博客
03-22 4万+
js通过class获取标签里面的内容——看源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p class="demo"...
js里面获取相同class的value
JiangBigShrimp的博客
12-11 3677
var service_id = {}; $(".service_id").each(function(index, el) { service_id[index] = el.value; });
Javascript获取value值的三种方法及注意点
热门推荐
Akikang的博客
06-25 11万+
  今天在js中用id名直接获取value值时遇到点问题，所以顺便做一下总结。   JavaScript获取value值，主要有以下三种：         1.用document.getElementById(“id名”).value来获取（例1）；         2.通过form表单中的id名或者name名来获取（例2）。        3.通过id名（不用写getElementById，也不...
vue class 判断
最新发布
08-19
### 回答1： 在 Vue 中，可以使用 `v-bind:class` 指令来动态绑定 class。同时，也可以使用计算属性来根据数据的变化动态返回 class。 下面是一个示例代码： ```html <template> <div :class="{ active: isActive, 'text-danger': hasError, 'bg-primary': isPrimary }" > {{ message }} </div> </template> <script> export default { data() { return { isActive: true, hasError: false, isPrimary: true, message: 'Hello, Vue!' } } } </script> ``` 在上述代码中，`class` 绑定了一个对象，对象的 key 是对应的 class 名称，value 是一个布尔值，如果为 true，则该 class 生效。 此外，还可以使用数组语法，将多个 class 组合起来。例如： ```html <template> <div :class="[isActive ? 'active' : '', isPrimary ? 'bg-primary' : '']"> {{ message }} </div> </template> ``` 在上述代码中，`class` 绑定了一个数组，数组中的元素是字符串，表示要绑定的 class 名称。如果该元素的条件为 false，则该 class 不生效。 ### 回答2： 在Vue中，我们可以使用class特性来动态地为元素添加或移除一个或多个CSS类。Class绑定是通过将一个JavaScript对象或一个返回对象的计算属性传递给v-bind:class指令实现的。 最常见的用法是通过在模板中直接传递一个对象给v-bind:class来绑定样式类。这个对象中的键是类名，值是布尔值，表示该类是否应该被应用。例如： ```html <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> ``` 在上面的例子中，active类将会在isActive为true时被添加，text-danger类将会在hasError为true时被添加。 我们也可以传递一个计算属性来返回一个对象来动态地切换类。例如： ```html <div v-bind:class="classObject"></div> ``` ```javascript data() { return { isActive: true, error: null } }, computed: { classObject() { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } } ``` 在上面的例子中，classObject计算属性返回了一个对象，根据isActive和error的值来动态地切换active和text-danger类。 此外，我们还可以使用数组语法来将多个类应用到元素上。例如： ```html <div v-bind:class="[activeClass, errorClass]"></div> ``` ```javascript data() { return { activeClass: 'active', errorClass: 'text-danger' } } ``` 在上面的例子中，activeClass和errorClass都是定义在data中的变量，它们的值将会被应用为类名。 综上所述，Vue的class判断可以通过传递一个对象、计算属性或数组来动态地切换类，使开发者能够根据不同的条件灵活地修改元素的样式。 ### 回答3： Vue中的class判断可以通过使用计算属性或绑定样式对象的方式来实现。 当需要根据条件动态添加或移除class时，可以使用计算属性。计算属性是基于依赖进行缓存的，只有相关依赖发生变化时才会重新计算，因此性能较高。 示例代码如下： ```html <template> <div :class="classObject"></div> </template> <script> export default { // ... computed: { classObject: function() { return { active: this.isActive, 'text-danger': this.error, 'bg-color': this.backgroundColor } } } } </script> ``` 上面的例子中，`classObject`是一个计算属性，它根据组件中的数据动态生成一个对象。对象的属性名是class名称，属性值是一个布尔值，表示是否添加该class。这样，在对应的DOM元素中，会根据计算属性的值动态添加或移除相应的class。 另一种方式是使用绑定样式对象。与计算属性不同，绑定样式对象是在模板中直接绑定，不会缓存计算结果。所以当数据发生变化时，会立即更新样式。 示例代码如下： ```html <template> <div :class="{ active: isActive, 'text-danger': error, 'bg-color': backgroundColor }"></div> </template> <script> export default { // ... } </script> ``` 以上是Vue中class判断的两种常见方法，根据实际情况可以选择适合的方式来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值