Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >将相同的jquery函数应用于父div中的元素

将相同的jquery函数应用于父div中的元素
EN

Stack Overflow用户
提问于 2017-06-11 00:23:41
回答 2查看 43关注 0票数 0

代码jsFiddle

我将jquery的click函数应用于'li#info‘元素。但是,当我单击时,它会对不同父元素(也包括('#theme div#info-overlay') )执行jquery。

我希望,每当在li#info父元素('#theme')上单击‘’时,它就会对其子元素执行函数,只对(div#info-overlay)执行函数。

就像在代码中一样,点击'Fe‘它打开两个块上的覆盖层。但我希望它只显示覆盖到‘Fe’被点击的块。

对不起,我是jquery的新手。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-06-11 00:34:35

我明白你的意思了。您只需要更改一行代码,因为两个div都有相同的id,这就是为什么两者都出现在click上,并且在单个文件上多次使用相同的id并不是一个好做法。总有一天会有问题的。

我要换这条线

$("div#info-overlay").toggle('100');

进入到这个

$(this).parents('#theme').find("#info-overlay").toggle('100');

代码语言:javascript
运行
AI代码解释
复制
check this  

JS Fiddle

票数 0
EN

Stack Overflow用户

发布于 2017-06-11 00:36:33

使用这个查找div $(this).parents('#theme').find("#info overlay").toggle('100');

代码语言:javascript
运行
AI代码解释
复制
$(document).ready(function(){

    $("div#theme").hover(function(){

        $(".theme .header *").show();
        $(".theme .header .overlay").hide();
    },function(){
    	$(".theme .header *").hide();
    });
 
        $("li#info").click(function(){
          $(".theme .header .overlay").hide();
           $(this).parents('#theme').find("#info-overlay").toggle('100');
        
			  
        //	$("div#info-overlay").toggle('100');
        });
      
});
代码语言:javascript
运行
AI代码解释
复制
/*
	theme block
*/
.theme{
	width: 100%;
	height: 250px;
	background-color: #fff;
	margin: 20px auto;
}
.theme .header{
	width: 100%;
	height: 200px;
	position: relative;
	background-color: #eee;
}
.theme .header *{
	display: none;
}
.theme .header .overlay{
	position: absolute;
	background-color: #fff;
	left: 60px;
	top: 10px;
	width: 83%;
	height: 180px;
	z-index: 80;
}
.theme .header .about{
	position: absolute;
	left: 10px;
	top: 10px;
}
.theme .header .about li{
	display: block;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	background-color: #FED200;
	opacity: .5;
	color: #fff;
	padding: 5px 10px;
	margin: 5px 0;
}

.theme .footer{
	width: 100%;
	height: 50px;
	padding: 0 20px;
}
.theme .footer .left{
	width: 85%;
	display: inline-block;
	overflow-y:hidden;
	height: 50px;
	float: left;
	padding: 10px 0;
}
@media screen and (min-width:620px) {
	.theme{
		width: 70%;
	}
}
@media screen and (min-width:720px) {
	.theme{
		width: 49%;
		display: inline-block;
	}
}
@media screen and (min-width:920px) {
	body .container.theme-holder {
		width: 70%;
	}
}
@media screen and (min-width:1024px) {
	body .container.theme-holder {
		width: 95%;
	}
	.theme{
		width: 32%;
	}

}
@media screen and (min-width:1200px) {
	body .container.theme-holder {
		width: 85%;
	}
}
代码语言:javascript
运行
AI代码解释
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
			<div class="header">

				<div class="about">
					<li id="info">Fe</li>
				</div>



				<div id="info-overlay" class="overlay">
				info
				</div>

			</div>
			<div class="footer">
				<div class="left">
					<div class="name">
					<p>Corporate sdfsfdsfdsfsd</p>
					</div>
				</div>

			</div>
		</div>


		<div id="theme" class="theme">
			<div class="header">

				<div class="about">
					<li id="info">Fe</li>
				</div>

				<div id="info-overlay" class="overlay">
				info
				</div>

			</div>
			<div class="footer">
				<div class="left">
					<div class="name">
					<p>Corporate dfsasdfdsafs</p>
					</div>
				</div>	
			</div>
		</div>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44481792

复制
相关文章
Java中对map按key或val排序
Collections是一个工具类,sort是其中的静态方法,是用来对List类型进行排序的,它有两种参数形式:
sunonzj
2022/06/21
1.6K0
int a; int* a; int** a; int (*a)[]; int (*a)(int)
a) int a;表示一个内存空间,这个空间用来存放一个整数(int); b) int* a;表示一个内存空间,这个空间用来存放一个指针,这个指针指向一个存放整数的空间,即a)中提到的空间; c) int** a;表示一个内存空间,这个空间用来存放一个指针,这个指针指向一个存放指针的空间,并且指向的这个空间中的指针,指向一个整数。也简单的说,指向了一个b)中提到的空间; d) int (*a)[4];表示一个内存空间,这个空间用来存放一个指针,这个指针指向一个长度为4、类型为int的数组;和int** a的区别在于,++、+=1之后的结果不一样,其他用法基本相同。 以上四种类型见上图表示。 e) int (*a)(int);表示一个内存空间,这个空间用来存放一个指针,这个指针指向一个函数,这个函数有一个类型为int的参数,并且函数的返回类型也是int。
Twcat_tree
2022/11/30
2.3K0
int a; int* a; int** a; int (*a)[]; int (*a)(int)
lombok的val
今天遇到一个情况,我们知道把java代码粘贴到kt文件里,idea会自动转换java为kt
阿超
2023/02/22
9630
lombok的val
listnode.val java(string indexof方法)
有一列 1.给出 Input: (2 -> 4 -> 3) + (5 -> 6 -> 4) 要求 Output: 7 -> 0 -> 8
全栈程序员站长
2022/08/01
6450
Train / Val / Test划分
合理的Train/Test集划分会有效地减少under-fitting和over-fitting现象
mathor
2020/01/15
2.2K0
VBA专题:Val函数
Val函数返回作为参数传递的字符串中的前导数字,它在无法识别为数字部分的第一个字符处停止读取字符串,但它不会在空格处停止。
fanjy
2022/11/16
1.5K0
jquery的html,text,val
.html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值。 这三个方法功能上的对比 .html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不过.html()是用来读取元素的HTML内容(包括其Html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的"value"值。其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;
marsggbo
2018/01/23
2K0
jquery的html,text,val
    1.html()用为读取和修改元素的HTML标签     2.text()用来读取或修改元素的纯文本内容     3.val()用来读取或修改表单元素的value值。
ydymz
2018/09/10
1.6K0
int(*p)[4] int*p[4]
1、int(*p)[4];------p为指向含4个元素的一维整形数组的指针变量(是指针) #include <stdio.h> #include <stdlib.h> int main() { int a[4]={1,2,3,4}; int (*p)[4]; p=&a; printf("%d\n",(*p)[3]); printf("%d\n",*p); return 0; } 2、int *p[4];-------定义指针数组p,它由4个指向整型数据的
谙忆
2021/01/19
2K0
java中string转换为int(int char)
// String change int public static void main(String[] args) { String str = “123”; int n; // first method // n = Integer.parseInt(str); n = 0; n = Integer.parseInt(str); System.out.println(“Integer.parseInt(str):”+ n); System.out.println(“\n”); //second method //n = Integer.valueOf(str).intValue();
全栈程序员站长
2022/07/28
1.9K0
java中string转换为int(int char)
JAVA将string转化为int(int怎么转string)
1). int i = Integer.parseInt([String]); 或
全栈程序员站长
2022/07/28
3K0
C# int int16 Int32 Int64的介绍[通俗易懂]
今天看到别人的代码中用到Int32,UInt32相关,想到自己平时用的都是int类型整数,就心生好奇的翻了一下资料:
全栈程序员站长
2022/09/21
3.6K0
.net Int16 、(int Int32)、 Int64 的区别
摘要: 关于什么是16位整数,32位整数,64位整数,请看这里:http://www.cnblogs.com/EasonJim/p/4837061.html Int16 值类型表示值介于 -32768 到 +32767 之间的有符号整数。
拓荒者
2019/03/14
2.7K0
int是什么_int a[4][4]
Int16 意思是16位整数(16bit integer),相当于short 占2个字节 -32768 ~ 32767
全栈程序员站长
2022/09/21
1.4K0
聊聊kotlin的val跟var
val:英文读value,代表是immutable, 只读的意思 比如下面这个kotlin代码
韦东锏
2021/09/29
1.2K0
聊聊kotlin的val跟var
2022-05-26:void add(int L, int R, int C)代表在arr[L...R]上每个数加C, int get(int L, int
2022-05-26:void add(int L, int R, int C)代表在arrL...R上每个数加C,
福大大架构师每日一题
2022/05/26
1.5K0
2022-05-26:void add(int L, int R, int C)代表在arr[L...R]上每个数加C, int get(int L, int
#define a int[10]与 typedef int a[10]用法
// #define a int[10] #include <stdio.h> #include <stdlib.h> #define a int[10] int main() { int *p=(int *)malloc(sizeof(a)); p[0]=1; printf("%d\n",p[0]); return 0; } // typedef int a[10]; #include <stdio.h> typedef int a[10]; int m
Daotin
2018/08/31
1.6K0
Android逆向之旅---动态方式破解apk进阶篇(IDA调试so源码)[转]include <stdio.h>int func(int a, int b, int c, int d, int e,
声明:本文转自Android逆向之旅---动态方式破解apk进阶篇(IDA调试so源码),此文干货很多。
用户2930595
2018/08/23
4.2K0
Android逆向之旅---动态方式破解apk进阶篇(IDA调试so源码)[转]include <stdio.h>int func(int a, int b, int c, int d, int e,
JAVA 枚举 String-int
/** * @author 姜兴琪 */ package cn.bycs.online.dealer.vo; /** * @author jiangxingqi * 车辆状态枚举 */ public enum NewCarStatusEnum { DRAFT("草稿",1), SUBMIT_RELEASE("提交发布",2), PUBLISH_SUCCESS("发布成功",3), AUDIT_DENY("审核不通过",4); private St
week
2018/08/27
3440
点击加载更多

相似问题

基本Regex需要帮助

15

需要Python Regex帮助(基本)

42

需要C语言的基本帮助

26

需要帮助来完成连接

10

需要帮助理解基本递归问题

16
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

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

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档