圍繞數據庫條目（縮略圖）的隨機顏色邊框（Javascript）

此刻，我正在致力於一個網站，這意味着我的投資組合，所以我希望它是一個挑戰。圍繞數據庫條目（縮略圖）的隨機顏色邊框（Javascript）

我展示我的作品的部分使用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。

如果有什麼我忘記提及或者你需要知道，讓我知道。我期待着回覆。

來源

2012-04-20 Levi

如果我理解你的權利，你應該有（與PHP產生的），看起來像一個HTML頁面：

<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);

每次光標進入一個元素（在你的情況下的圖像），這將得到一個邊界，如果光標leavs它的邊框將被刪除。

來源

2012-04-20 09:15:51 tbraun89

謝謝！這工作正是我如何描繪它。由於一些奇怪的原因，它確實給了我一個控制檯的錯誤（有關它不是一個函數），但一切似乎工作得很好。 – Levi 2012-04-20 09:47:34

好了，第一關：(colors.length - 1)是你想去的地方，長度爲3的數組，有2個爲最高鍵（0索引！）

二：你能張貼的實際HTML，或更好：得到一個jsfiddle，所以我們可以修改你的代碼，或者分叉你的jsfiddle？

第三：我注意到你正在使用jQuery，你有沒有試過用$('#thumbnails').find('div');來獲得你的images數組？你會得到什麼？

來源

2012-04-20 09:01:11

如果有人讀這個奇蹟，原來的例子不起作用的原因是因爲它正在創建一個閉包。內部函數可以訪問在外部函數中創建的變量，但在外部函數返回時它會獲取變量的值。

在這種情況下，當代碼：

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

執行時，i的值將是4，其在該範圍之外，對於每一個圖像。

一個解釋請參見本：

JavaScript closure inside loops – simple practical example

來源

2012-04-20 09:56:07 Carl

圍繞數據庫條目（縮略圖）的隨機顏色邊框（Javascript）

回答

相關問題