数据库条目(缩略图）周围的随机颜色边框(Javascript）

Random color border (Javascript) around database entries (thumbnails)

本文关键字：随机 颜色 边框 Javascript 周围 略图 数据库      更新时间：2023-09-26

目前我正在开发一个网站，该网站旨在成为我的作品集，所以我希望这是一个挑战。

我展示我的作品的部分是用PHP编码的，并连接到数据库。使用 WHILE 循环，它会添加我网站上的所有数据库记录。

对于这个网站，我决定第一次使用Javascript，使其更具挑战性并学习这一点。

我想要的是 PHP WHILE 循环添加的每个数据库记录周围的边框，它仅在将鼠标悬停在缩略图上时显示并更改颜色（固定的颜色数组）。

这是我到目前为止的代码：

function loaded() {
        var colors = ["#FC3E6B","#24FF00","#0087F9","#F9F900"];
        var images = document.getElementById("thumbnails").getElementsByTagName("div");
        console.log(images);
        for (var i = 0; i < images.length; i++) {
            var rand   = Math.floor(Math.random()*colors.length);
            images[i].style.borderStyle = 'solid';
            images[i].style.borderWidth = '1px';
            images[i].style.borderColor = 'transparent';
            $(images[i]).hover(function(){
                console.log('hovering over');
                images[i].style.borderColor = colors[rand];
            }, function(){
                console.log('hovering out');
                images[i].style.borderColor = 'transparent';
            });
         };
};

我现在的问题是它不起作用或部分工作。此代码仅适用于 WHILE 循环添加的第一个条目。在控制台中，我可以看到"控制台.log（图像）"仅返回第一个条目。

另一个问题是它还返回一个错误：

images[i] is undefined
images[i].style.borderColor = colors[rand];

这是我目前正在努力解决的两件事。这很可能是初学者/简单的错误，因为这是我第一次使用Javascript。

如果有什么我忘了提的，或者你需要知道，请告诉我。我期待着回复。

如果我理解正确，你应该有一个HTML页面（用PHP生成），看起来像：

<div id="thumbnails">
  <img src="..." />
  <img src="..." />
  <img src="..." />
  ...
</div>

如果您将鼠标悬停在其中一张图像上，则要为其添加边框，如果鼠标离开图像，请删除边框。我假设您正在使用jQuery，因此您可以为每个图像添加一个类，例如 <img class="record" src="..." />并尝试以下 JavaScript：

$(function() {
  var colors = ["#FC3E6B","#24FF00","#0087F9","#F9F900"];
  $('.record').hover(
    function() {
      var rand = Math.floor(Math.random()*colors.length);
      $(this).css('border-style', 'solid');
      $(this).css('border-width', '1px');
      $(this).css('border-color', colors[rand]);
    },
    function() {
      $(this).css('border-style', 'none');
    }
  );
}).call(this);

每次光标进入一个元素（在您的例子中是图像）时，都会得到一个边框，如果光标离开它，边框将被删除。

好的，首先：(colors.length - 1) 是你想去的地方，一个长度为 3 的数组，有 2 作为最高键（0 索引！

第二：你能发布实际的HTML，或者更好的是：建立一个jsfiddle，这样我们就可以修改你的代码，或者分叉你的jsfiddle？

第三：我注意到你正在使用jQuery，你有没有尝试过使用$('#thumbnails').find('div');来获取你的images数组？那你会得到什么？

如果有人读到这篇文章想知道，原始示例不起作用的原因是因为它正在创建一个闭包。 内部函数可以访问在外部函数中创建的变量，但在外部函数返回时获取变量的值。

在这种情况下，当代码：

images[i].style.borderColor = colors[rand];

执行时，对于每个图像，i 的值将为 4，这超出了范围。

有关解释，请参阅此处：

循环内的JavaScript闭包 - 简单的实际示例

相关文章：