JQuery: Ссылка цвет текста на случайное фоновое изображение

Question

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

Я пытаюсь с этим кодом, но не имеющие удачи:

$(document).ready(function() { 
    var images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg']; 

    $('body').css({ 
     'background-image': 'url(img/' + images[Math.floor(Math.random() * images.length)] + ')' 
    }); 

    if ($('body').css('background-image') === 'img/5.jpg') { 
     $('#intro').css('color', 'red!important'); 
    }; 
}); 

Answer 1

.css('background-image') возвращает URL-адрес изображения, завернутый в url(). Я хотел бы использовать массив объектов вместо:

var themes = [{ 
    image: '1.jpg', 
    color: 'red' 
}, { 
    image: '2.jpg', 
    color: 'orange' 
}]; 

Теперь вы можете сделать:

var theme = themes[Math.floor(Math.random() * themes.length)]; 

$('body').css({ 
    'background-image': 'url("img/' + theme.image + '")', 
    'color': theme.color 
}); 

Answer 2

Почему бы не обновить images массив, так что каждый элемент на самом деле массив `фона/текста-цвета» - как это:

var images = [['1.jpg', '#000'], ['2.jpg', '#111'], ['3.jpg', '#222'], ['4.jpg', '#333'], ['5.jpg', '#444'], ['6.jpg', '#555']]; 
var random = Math.floor(Math.random() * images.length)] 
$(body).css({ 
    'background-image': 'url(img/' + images[random][0] + ')', 
    'color':   images[random][1] 
}); 

Answer 3

попробовать положить console.log($('body').css('background-image')), чтобы увидеть, что возвращение этого. Я думаю, что это что-то вроде возвращения URL (IMG/5.jpg) вместо IMG/5.jpg

также, вероятно, будет проще, если установить случайную вещь в переменную, а затем сделать сравнение с этой переменной вместо атрибута CSS

Answer 4

Вот как я бы это сделать:

var styles = [ 
    { image: '1.jpg', color: 'blue' }, 
    { image: '2.jpg', color: 'green' }, 
    ... 
]; 

var style = styles[Math.floor(Math.random() * styles.length)]; 
$(body).css{ 'background-image': 'url(img/' + style.image + ')', 
      'color': style.color + '!important' }); 

Однако, основная проблема с вашим кодом является то, что вы забыли url(...), когда по сравнению с существующим стилем, он должен быть:

if ($('body').css('background-image') === 'url(img/5.jpg)') {