数据库条目周围的随机颜色边框（JavaScript）（缩略图） [英] Random color border (Javascript) around database entries (thumbnails)

问题描述

目前我在一个网站上工作，这意味着我的投资组合，所以我希望它是一个挑战。

at the moment I'm working on a website that is meant to be my portfolio so I wanted it to be a challenge.

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

The section where I show my work is coded with PHP and is connected to a database. With a WHILE loop it adds all the database records on my website.

对于这个网站，我决定第一次使用Javascript，也学习这个。

For this site I have decided to use Javascript for the first time, to make it more challenging and to learn this as well.

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

What I want is a border around every database record the PHP WHILE loop adds, which is only shown when hovered over and changes color (fixed array of colors) every time you hover over the thumbnail.

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

This is the code I have so far:

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）只返回第一个条目。

My problem now is that it doesn't work, or partially. This code only applies on the first entry the WHILE loop adds. In the console I can see that the "console.log(images)" only returns the first entry.

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

Another problem is that it also returns an error:

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

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

These are the 2 things I'm struggling with at the moment. It might very well be beginner/easy mistakes since it's my first time working with Javascript.

如果有任何我忘记提及或者你需要知道，让我知道。
我期待着回复。

If there is anything I forgot to mention or you need to know, let me know. I'm looking forward to a reply.

推荐答案

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

If I understand you right you should have an HTML page (generated with PHP) that looks like:

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

如果您将鼠标悬停在其中一个图像上，鼠标离开图像。我假设你使用jQuery，所以你可以添加每个图像类。 < img class =recordsrc =.../> 并尝试以下javascript：

And if you hover one of the images you want to add a border to this an remove the border if the mouse leaves the image. I assume you are using jQuery, so you could add each image a class e.g. <img class="record" src="..." /> and try the following 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);

每次光标输入一个元素（在你的情况下是一个图像），这将得到一个边框，if光标指示边框将被删除。

Each time the cursor enters an element (in your case an image) this will get a border, if the cursor leavs it the border will be removed.

这篇关于数据库条目周围的随机颜色边框（JavaScript）（缩略图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！