Случайная граница цвета (Javascript) вокруг записей в базе данных (миниатюры)

Question

на данный момент я работаю над веб-сайтом, который предназначен для моего портфолио, поэтому я хотел, чтобы это было проблемой.

Раздел, где я показываю свою работу, закодирован с помощью 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]; 

Таковы 2 вещи, я борюсь с в данный момент. Это может быть очень легко начинать/легко ошибаться, так как я впервые работаю с Javascript.

Если есть что-то, что я забыл упомянуть, или вам нужно знать, дайте мне знать. Я с нетерпением жду ответа.

Answer 1

Если я понимаю, что вы правы, вы должны иметь страницу 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); 

Каждый раз, когда курсор входит элемент (в вашем случае изображение) это получит границу, если курсор leavs его границы будут удалены.

Answer 2

Хорошо, во-первых: (colors.length - 1) где вы хотите пойти, массив длиной 3, имеет 2, как высокий ключ (0 индексированные!)

Второе: вы можете разместить фактическое HTML, или еще лучше : получите jsfiddle, так что мы действительно можем изменить ваш код или развить jsfiddle?

В-третьих: Я заметил, что вы используете jQuery, попробовали ли вы использовать $('#thumbnails').find('div');, чтобы получить массив images? что вы получаете?

Answer 3

В случае, если кто-либо читает это чудо, причина, по которой исходный пример не срабатывает, заключается в том, что он создает закрытие. Внутренняя функция имеет доступ к переменным, созданным во внешней функции, но получает значение переменных, когда возвращается внешняя функция.

В этом случае, когда код:

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

выполняется, значение я был бы 4, который выходит за пределы диапазона, для каждого изображения.

Смотрите это для объяснения:

JavaScript closure inside loops – simple practical example