javascript - 在对学校项目的 html 文件中的 Javascript 代码进行故障排除方面需要帮助

Question

这是我第一次在 stackoverflow 上发帖，所以如果有任何我没有正确遵守的规则或指南，我深表歉意。

问题

我目前正在做一个学校项目，我们必须创建一个网站，我的网站是用砖石 build 的(来自 http://masonry.desandro.com/)。我希望每次有人访问该网站时我的图像都以不同的方式显示，因此我想创建一个可以加载不同图像的系统。我已经将来自网络上多个来源的代码放在一起，但它没有返回正确的图像(或任何与此相关的图像)。 我对编码还是很陌生，但我为实现这一目标所做的努力如下:

代码

<img id="image1" class="grid-item grid-item--width2 grid-item--height3" src="http://placehold.it/200x200">
      <script>
        var mydate = new date();
        var mynumber = mydate.getDate();

      document.getElementById("image1").src = "images/" + mynumber +".jpg";
      if(mynumber==33)
      {
          mynumber=1;
      }
      else
      {
          var mynumber=mynumber+1;
      }
      </script>

这背后的想法是它抓取日期，然后使用这个日期开始抓取我的图像文件夹中的图像(图像被命名为 1、2、3、4 ……这将继续并添加到，但出于测试目的，我已确保它们超过 31)。这意味着网站的加载每天都会略有不同。然而，这并没有奏效，我也不知道为什么。

附加信息

由于我对其中的大部分内容都不熟悉，所以我不知道解决这个问题需要多少信息，所以我现在将尝试添加尽可能多的内容，可能不需要以下内容。

• 我所有的测试都是在 chrome 上完成的
• 我所有的工作都是用括号完成的
• 我正在为所有图像使用占位符图像作为开头
• 加载到页面上的每个图像都是一个以“image1”、“image2”、“image3”等开头的占位符图像。
• 如果我能让这段代码正常工作，它将被复制到每张图片下并一张一张地替换它们。

• 附上Js文件:

  $(document).ready( function() {
      var $grid = $('.grid').masonry({
          itemSelector: '.grid-item',
          columnWidth: 200
      });
  
      var $stamp = $grid.find('.stamp');
      var isStamped = false;
      $('.stamp-button').on( 'click', function() {
          // stamp or unstamp element
          if ( isStamped ) {
              $grid.masonry( 'unstamp', $stamp );
          } else {
              $grid.masonry( 'stamp', $stamp );
          }
          // trigger layout
          $grid.masonry('layout');
          // set flag
          isStamped = !isStamped;
      });
  });
  

感谢您的宝贵时间

感谢您抽出时间帮助我完成我的学校项目。感谢任何反馈，如果您需要更多信息来帮助，请告诉我可以为您提供什么。谢谢

Answer 1

我不知道 masonry 。我也想知道图像来源，有没有保存图像的阵列？或者你会得到一个 json 响应。只是为了演示，我将一些图像放在一个数组中。而且并不是每个图像都有它的扩展名 .jpg。在写这篇文章的那天，也就是 12 月 8 日，我只放了 10 张图片。你可以在图片前放一些空的 ' ' 来匹配数组的索引和图片来源

var tDate = new Date();
var getToday = tDate.getDate();
console.log(imgSource[getToday]);
document.getElementById("image1").src=imgSource[getToday]; 

要查看完整代码，请访问 HERE

你也添加了这部分

src="http://placehold.it/200x200"

是否需要在该位置添加源图像？