0

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

我展示我的作品的部分使用 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 循环添加的第一个条目。在控制台中，我可以看到“console.log(images)”只返回第一个条目。

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

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

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

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

4

3 回答 3

0

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

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

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

于 2012-04-20T09:01:11.113 回答
0

如果我理解正确，您应该有一个 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);

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

于 2012-04-20T09:15:51.790 回答
0

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

在这种情况下，当代码：

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

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

请参阅此以获取解释：

循环内的 JavaScript 闭包——简单实用的示例

于 2012-04-20T09:56:07.987 回答