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

目前我正在建立一个本应属于我的投资组合的网站，所以我希望它成为一个挑战。

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

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

我想要的是PHP WHILE循环添加的每个数据库记录周围的边框，只有在hover在上面时才显示，并且每次将鼠标hover在缩略图上时都会更改颜色（固定的颜色数组）。

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

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循环添加的第一个条目。 在控制台中，我可以看到“console.log（images）”仅返回第一个条目。

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

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

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

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

Answer 1

如果我理解你，你应该有一个HTML页面（用PHP生成），如下所示：

 
    https://stackoverflow.com/questions/10242999/random-color-border-javascript-around-database-entries-thumbnails/...  

如果您将其中一个图像hover在想要添加边框的图像上，则在鼠标离开图像时移除边框。 我假设您正在使用jQuery，因此您可以为每个图像添加一个类，例如并尝试以下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); 

每次光标进入一个元素（在你的情况下是一个图像），这将得到一个边框，如果光标离开它，边框将被删除。

Answer 2

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

第二：你可以发布实际的HTML，或者更好的是：获得一个jsfiddle，所以我们实际上可以修改你的代码，或者分叉你的jsfiddle？

第三：我注意到你正在使用jQuery，你尝试过使用$('#thumbnails').find('div'); 得到你的imagesarrays？ 那你得到了什么？

Answer 3

如果有人读这个奇迹，原始例子不起作用的原因是因为它正在创建一个闭包。 内部函数可以访问外部函数中创建的变量，但是当外部函数返回时它获取变量的值。

在这种情况下，当代码：

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

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

看到这个解释：

循环内的JavaScript闭包 – 简单实用的例子