Question

第一次在这里发帖，如果帖子不整洁，那就很抱歉：）

我试图在jQuery中制作一个15幻灯片拼图，我的问题是这个; 我循环播放了16张图片，我希望隐藏最后一张图片并在拼图后显示，但它无效，我尝试使用fadeOut()和hide()，但它＆＃39 ; s不工作。

＆＃13;

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

＆＃13;

img {
  box-shadow: 5px 5px 3px #888888;
  line-height: 0;
  position: absolute;
}

＆＃13;

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

＆＃13;

Answer 1

在添加这样的图片后尝试使用.find()功能：$("#board").find("img#15").hide(); 这是因为您动态附加图像。

Answer 2

这个$("img#15").hide();将完成这项工作：

＆＃13;

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

＆＃13;

img {
  box-shadow: 5px 5px 3px #888888;
  line-height: 0;
  position: absolute;
}

＆＃13;

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

＆＃13;

实际上只使用带有数字的ID是一种不好的做法，因为ID在整个网页上应该是唯一的id === 0 ... 15很有可能被重复

Answer 3

你不需要用js隐藏它 - css会用

来隐藏它

img:last-of-type{visibility:hidden}

请注意，我使用的是visibility：hidden而不是display：none，以便在DOM和页面流中保留其位置 - 但只是将其隐藏在视图中。

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

如何从16 img循环隐藏1 img

3 个答案: