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

Question

代码jsFiddle

我将jquery的点击功能应用于'li#info'元素。但是当我点击时，它会对不同父元素('#theme div#info-overlay')的元素执行jquery。

我希望，只要在父元素 li#info上点击“('#theme')”，它就会对其子元素执行 {{ 1}}。

与代码一样，点击“Fe”，它会在两个块上打开叠加层。但我希望它只显示叠加到'Fe'被点击的块。

抱歉，我是jquery的新手。

Answer 1

我明白了你的意思。你只需要改变一行代码 因为两个div都有相同的ID，这就是为什么两者都出现在点击上 并且在单个文件上多次使用相同的id并不是一个好习惯。 它会在某个时候出现问题。

我已更改此行

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

进入这个

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

check this  

JS Fiddle

Answer 2

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

$(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');
        });
      
});

/*
	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%;
	}
}

<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>