jquery - 单击表格单元格时显示图像

Question

我有一个 4x4 表，我想在其中使用 jquery 在单击的单元格上显示随机图像。当页面加载表为空时，图像仅在用户单击单元格时加载。我目前仅在一个单元上进行测试，以使其在其他单元上实施之前使其工作。目前，当页面加载时，单元格是空的，但是当我点击空单元格时，图像不会加载

var random_images = ["img1.png", "img2.png", "img3"]

function getRandomImage(imgAr, path) {
  path = path || 'images/'; // default path here
  var num = Math.floor(Math.random() * imgAr.length);
  var img = imgAr[num];
  var imgStr = '<img src="' + path + img + '" alt = "">';
  document.write(imgStr);
  document.close();
}

$(document).ready(function() {
  $("#img1").click(function() {
    $("#img1").show();
  });
});

#img1 {
  display: none;
}

<table>

  <tr>
    <td id="img1">
      <script>
        getRandomImage(random_images);
      </script>
    </td>
    <td>
      <script>
        getRandomImage(random_images);
      </script>
    </td>
    <td>
      <script>
        getRandomImage(random_images);
      </script>
    </td>

</table>

标签： jquerycss

Answer 1

我不确定您是否可以按照自己的方式进行操作，因此如果要加载随机图像，建议您执行以下操作：

将带有类的图像添加到您的td：

<td id="img1">
  <img class="loadImg" src="" />
</td>
<td>
  <img class="loadImg" src="" />
</td>
<td>
  <img class="loadImg" src="" />
</td>

然后我们稍微修改一下你的脚本。

$(".loadImg").each(function() {
  $(this).attr("src",getRandomImage(random_images));
});

另请注意，您尚未关闭<tr>

演示

var random_images = ["img1.png", "img2.png", "img3"]

function getRandomImage(imgAr, path) {
  path = path || 'images/'; // default path here
  var num = Math.floor(Math.random() * imgAr.length);
  var img = imgAr[num];
  var imgStr = path + img;
  return imgStr;
}

$(document).ready(function() {
  $("table .img p").click(function() {
    $(this).next().attr("src", getRandomImage(random_images)).show();
    $(this).hide()
  });
});

table .img img {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="img">
      <p>loadImg 1</p>
      <img class="loadImg" src="" />
    </td>
    <td class="img">
      <p>loadImg 2</p>
      <img class="loadImg" src="" />
    </td>
    <td class="img">
      <p>loadImg 3</p>
      <img class="loadImg" src="" />
    </td>
  </tr>
</table>