Случайное фоновое изображение JQuery / JS для элемента :: before - PullRequest
Новая
       3

Случайное фоновое изображение JQuery / JS для элемента :: before

0 голосов
/ 16 октября 2019

[КОММЕНТАРИЙ] Я забыл упомянуть, что я загрузил JQuery 1.9 до

Я прочитал и выполнил несколько возможных решений для моего вопроса, но я полностью застрял.

Теперь у меня есть статическое фоновое изображение для блока, который помещен: перед div, но я бы хотел показать случайный фон (изображение) для этого блока.

Это то, что у меня пока есть: // Случайные фоновые изображения CSS3 // Ответ Dimser @ 5 марта 13: 18: 59 

$(document).ready(function() {

var bgArray = ['benjamin.png', 'peter.png', 'auke.png'];
var bg = bgArray[Math.floor(Math.random() * bgArray.length)];

$('body').css('background', bg);

// Defined a path for the images
var path = 'https://nieuw.koffiematters.nl/images/';

$('body').css('background', path+bg);

});

В этом примере я решил протестировать без элемента :: before, но это дает мне ошибку: «ReferenceError: $ is notfined»

Прежде чем мы сможем двигаться дальше,эта ошибка должна быть исправлена ​​в первую очередь, верно? После этого я хотел бы услышать ваш подход к тому, чтобы заставить его работать с элементом :: before.

У меня нет полного доступа к источнику, поэтому я не могу добавить /изменить / удалить классы обычным способом. Это файл JSFiddle:

http://jsfiddle.net/3khmzsn1/21/

Ответы [ 4 ]

1 голос
/ 16 октября 2019

Прежде всего, вам нужно добавить jQuery в вашем примере.

у вас нет прямого доступа к ::after, ::before псевдо-селекторам, но вы можете попробовать это:

http://jsfiddle.net/b7oqx8r3/

0 голосов
/ 16 октября 2019

Если вы используете такие выражения, как ${variable}, вам следует использовать другие кавычки, а не 'single' и не 'double', вместо этого используйте `backtick`.

Итак, рабочий код приведен ниже: 

$('head').append('<style>.ticket-page .c-ticket-row::before { background-image: url(' + path + bg + ') }</style>');
0 голосов
/ 16 октября 2019

Ты самый лучший! Но ... это была моя вина, что я не упомянул, что раньше загружал JQuery правильно, так что, к сожалению, это не проблема.

Я попробовал идею Websiteproduct и действительно верил в нее! Но ... к сожалению, в момент Live-реализации есть узкое место. Это файл шаблона для Freshdesk, который использует фреймворк Liquid. Я не упомянул об этом, потому что не ожидал, что у меня будут проблемы с небольшим покоем JS. Когда я восстанавливаю решение websiteproduct Похоже, что скобки в расположении append игнорируются. Я сделал скриншот:

Я не знаю, прав ли я, но я должен разорвать эту строку (не знаю, как именно), поэтому переменные будут приняты, может быть?

0 голосов
/ 16 октября 2019

Jquery не загружается в ваш код. В jsfiddle вы можете выбрать структуру в верхней части вашего кода JavaScript. Вот обновленный код 

// https://stackoverflow.com/questions/15231812/random-background-images-css3
// Answered by Dimser @ Mar 5 '13 at 18:59

$(document).ready(function() {

    var bgArray = ['benjamin.png', 'peter.png', 'auke.png'];
    var bg = bgArray[Math.floor(Math.random() * bgArray.length)];

    /* $('body').css('background', bg); */

    // Defined a path for the images
    var path = 'https://nieuw.koffiematters.nl/images/';

        // As :before / :after aren't part of the DOM, I can't use the following syntax as far as I know:
    // $('body div::before).css('background', path+bg);
    // But the sample from Dimser doesn't work either. This is the error: ReferenceError: $ is not defined
    $('body').css('background', path+bg);

});

http://jsfiddle.net/4bf3gvkj/

...