当正方形为空白时，我只想fadeIn我单击的图像
当正方形为空白时，我只想fadeIn我单击的图像
提问于 2017-05-10 15:16:08
console.log('Test Sourced');
var onReady2 = function() {
console.log('memory game doc ready');
//TODO Add your code below to attach your event listeners to functions
//hides the images when button is clicked
$("#revealHide").click(function() {
$('.cardImg').fadeToggle('fast');
});
$(".cardDiv").click(function() {
$(".cardImg").fadeIn('slow')
});
};
//shows the img when clicked on the black box
// on document ready run the onReady2 function
$(document).ready(onReady2);
// revealHide function hides and shows all cards
function revealHide() {
//TODO add your code here to get the desired functionality
}
// singleClickFunc function hides and shows an indivdual card
function singleClickFunc() {
//TODO add your code here to get the desired functionality
}body {
background-color: LightCyan;
}
.cardDiv {
background-color: blue;
width: 150px;
height: 150px;
padding: 6px;
margin: 6px;
border-style: dashed;
float: left;
}
img {
width: 150px;
height: 150px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Assignment 6-3</title>
<script src="vendors/jquery.min.js" charset="utf-8"></script>
<script src="script.js" charset="utf-8"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<button id="revealHide" type="button">Show/Hide</button>
</div>
<div class="cardDiv">
<img class="cardImg" id='cardOne' src="imgs/banana.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardTwo' src="imgs/pear.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardThree' src="imgs/orange.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardFour' src="imgs/apple.png">
</div>
</body>
</html>
在15-17上，我想点击一个蓝色的框，只在我点击它的时候显示它。
回答 3
Stack Overflow用户
发布于 2017-05-10 15:21:02
若要在单击.cardImg时在.cardDiv中显示.cardImg，请使用$(this).find('.cardImg')在该元素中以.cardImg为目标，而不是使用$('.cardImg')针对所有这些元素。
$(".cardDiv").on('click', function() {
$(this).find(".cardImg").fadeIn('slow')
});Stack Overflow用户
发布于 2017-05-10 15:27:01
将$(".cardImg").fadeIn('slow')替换为$(this).find('img').fadeIn('slow')
console.log('Test Sourced');
var onReady2 = function() {
console.log('memory game doc ready');
//TODO Add your code below to attach your event listeners to functions
//hides the images when button is clicked
$("#revealHide").click(function() {
$('.cardImg').fadeToggle('fast');
});
$(".cardDiv").click(function() {
//$(".cardImg").fadeIn('slow')
$(this).find('img').fadeIn('slow')
});
};
//shows the img when clicked on the black box
// on document ready run the onReady2 function
$(document).ready(onReady2);
// revealHide function hides and shows all cards
function revealHide() {
//TODO add your code here to get the desired functionality
}
// singleClickFunc function hides and shows an indivdual card
function singleClickFunc() {
//TODO add your code here to get the desired functionality
}body {
background-color: LightCyan;
}
.cardDiv {
background-color: blue;
width: 150px;
height: 150px;
padding: 6px;
margin: 6px;
border-style: dashed;
float: left;
}
img {
width: 150px;
height: 150px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Assignment 6-3</title>
<script src="vendors/jquery.min.js" charset="utf-8"></script>
<script src="script.js" charset="utf-8"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<button id="revealHide" type="button">Show/Hide</button>
</div>
<div class="cardDiv">
<img class="cardImg" id='cardOne' src="imgs/banana.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardTwo' src="imgs/pear.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardThree' src="imgs/orange.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardFour' src="imgs/apple.png">
</div>
</body>
</html>
Stack Overflow用户
发布于 2017-05-10 15:35:56
请记住，$(".cardImg")仍然是一组匹配的元素，就像$(".cardDiv")一样。如果您执行$(".cardImg").anythingAtAll()，那么您将对所有匹配的元素执行函数，这正是您所描述的行为。您希望向每个event listener元素添加一个.cardDiv，所以代码的这一部分是正确的。
$(".cardDiv").click(function() {
});一旦进入该函数，就需要对单击的“特定元素”进行操作。您不希望对$('.cardImg')中所有匹配的元素进行操作。因此，不要在匹配的集合上调用fadeIn()函数，而是在单击的特定元素上调用它。在函数内部，给出特定元素的关键字是this。一旦将this关键字包装在jquery包装器$( )中，如so $(this)，您就可以对其执行jquery函数，例如fadeIn()和find()。find()将从单击元素中钻取DOM树，并找到与传入的任何元素匹配的任何元素，在本例中，我们在".cardImg"中传递。
您的代码应该是：
$(".cardDiv").on('click', function() {
$(this).find(".cardImg").fadeIn('slow')
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43896568
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号