How to hide 1 img from a 16 img loop
The first post here is so sorry if the post is not neat :)
I am trying to make a 15 slide puzzle in jQuery and my problem is this; I am looping 16 images and I want to hide the last image and show it after the puzzle, but it doesn't work, I tried to use fadeOut()
and hide()
, but it doesn't work.
$(document).ready(function() {
for (var i = 0; i < 16; i++) {
var img = "<img src='img/" + i + ".png' id="+ i +">";
$("#board").append(img);
}
$("img#15").ready(function(){
$(this).hide();
});
$("img").each(function() {
var i = parseInt($(this).attr("id"));
var yAs = Math.floor(i / 4);
var xAs = i % 4;
$(this).data("yAs", yAs);
$(this).data("xAs", xAs);
var xPosition = xAs * 160;
var yPosition = yAs * 128;
$(this).css({"left": xPosition});
$(this).css({"top": yPosition});
});
});
img {
box-shadow: 5px 5px 3px #888888;
line-height: 0;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slidepuzzle jQuery!</title>
<link rel="stylesheet" href="slidepuzzle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="slidepuzzle.js"></script>
</head>
<body>
<div id="board">
</div>
</body>
</html>
source to share
This $("img#15").hide();
will do the job:
$(document).ready(function() {
for (var i = 0; i < 16; i++) {
var img = "<img src='img/" + i + ".png' id="+ i +">";
$("#board").append(img);
}
$("img#15").hide();
$("img").each(function() {
var i = parseInt($(this).attr("id"));
var yAs = Math.floor(i / 4);
var xAs = i % 4;
$(this).data("yAs", yAs);
$(this).data("xAs", xAs);
var xPosition = xAs * 160;
var yPosition = yAs * 128;
$(this).css({"left": xPosition});
$(this).css({"top": yPosition});
});
});
img {
box-shadow: 5px 5px 3px #888888;
line-height: 0;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slidepuzzle jQuery!</title>
<link rel="stylesheet" href="slidepuzzle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="slidepuzzle.js"></script>
</head>
<body>
<div id="board">
</div>
</body>
</html>
In fact, using an identifier with just a number is bad practice, since the identifier must be unique on the web page and id === 0 ... 15
has a high chance of being repeated
source to share
You don't need to hide it with js-css, it will do it with
img:last-of-type{visibility:hidden}
Note that I am using visibility: hidden, not visible: no to keep my place in the DOM and the page flow, but just hide it from view.
$(document).ready(function() {
for (var i = 0; i < 16; i++) {
var img = "<img src='img/" + i + ".png' id="+ i +">";
$("#board").append(img);
}
$("img").each(function() {
var i = parseInt($(this).attr("id"));
var yAs = Math.floor(i / 4);
var xAs = i % 4;
$(this).data("yAs", yAs);
$(this).data("xAs", xAs);
var xPosition = xAs * 160;
var yPosition = yAs * 128;
$(this).css({"left": xPosition});
$(this).css({"top": yPosition});
});
});
img {
box-shadow: 5px 5px 3px #888888;
line-height: 0;
position: absolute;
}
img:last-of-type{visibility:hidden}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slidepuzzle jQuery!</title>
<link rel="stylesheet" href="slidepuzzle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="slidepuzzle.js"></script>
</head>
<body>
<div id="board">
</div>
</body>
</html>
source to share